Webpack 4 学习总结

一、安装配置

【前提】安装node.js环境
【官网下载】https://nodejs.org/zh-cn/
安装教程不赘述
创建项目文件夹
例如创建如下文件夹webpack_demo1
创建配置项
```
npm init -y
```
生成一个package.json文件如下图
全局安装webpack （不推荐，进行下一步操作）
```
npm install webpack -g
```

局部安装webpack(推荐)

npm install webpack --save-dev

另外，webpack 4要求安装包

npm install webpack-cli --save-dev

一起安装

npm install webpack webpack-cli --save-dev

以下表示安装成功

创建入口文件
```
./src/index.js
```
任意编写index.js文件内容用于测试

配置生产和开发模式

打开package.json文件添加如下脚本

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

现在运行：
```
npm run dev
```
生成dist/main.js ，其中 main.js 没有压缩

npm run dev 表示开发模式
```
npm run build
```
此时的main.js 被压缩，这便是生产模式

接下来看看打包的js文件是否能够使用

创建index.html 引入打包好的main.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./main.js" charset="utf-8"></script>
</head>
<body>

</body>
</html>

打开浏览器调试

输出结果表示打包成功，大功告成！！！

二、使用配置文件进行打包

上一讲中我们打包没有用到webpack.config.js配置文件，webpack4把自己定位为一个零配置的工具。这一讲学习配置文件使用，更好地学习webpack。

根目录下新建一个webpack.config.js文件（记载配置信息）

配置文件

 const path = require('path');

 module.exports = {
   entry:'./public/index.js',
   output:{
     path:path.resolve(__dirname,'build'),
     filename:'bundle.js'
   }
 }

字段	意义
entry	入口，所需打包的文件的路径
output	出口
path	文件打包后存放的路径
path.solve()	将路径或者路径片段的序列处理成绝对路径
_dirname	表示当前文件所在目录的绝对路径
filename	打包后文件的名称

按照配置项新建一个入口文件public/index.js
运行npm run dev

三、配置入口和出口的进阶使用

一、单出口形式

webpack.config.js

const path = require('path');


module.exports = {
  //单出口形式
  entry:['./public/index.js','./public/index2.js'],//有多个文件
  output:{
    path:path.resolve(__dirname,'build'),
    filename:'bundle.js'
  }
}

运行npm run dev

生成唯一的打包文件 bundle.js

二、多出口形式

`webpack.config.js`

const path = require('path');

module.exports = {
  //多出口形式
  entry:{
    entryOne:'./public/entryOne/index.js',
    entryTwo:'./public/entryTwo/index.js',
  },
  output:{
    path:path.resolve(__dirname,'build'),
    filename:'[name].js'
  }
}

文件结构
运行npm run dev
- 生成两个打包文件

四、配置webpack-dev-server

一、了解 webpack-dev-server

webpack-dev-server用来配置本地服务器
为 webpack 打包生成的文件提供web服务
自动刷新和热替换（HMR）

二、安装webpack-dev-server

npm install --save-dev webpack-dev-server

三、配置webpack.config.js文件

devServer:{
        contentBase:'./dist',  //设置服务器访问的基本目录
        host:'localhost', //服务器的ip地址
        port:8080,  //端口
        open:true  //自动打开页面
}

四、配置package.json

"scripts": {
    "start": "webpack-dev-server --mode development"
 }

五、运行命令

npm run dev 打包文件

npm run start 打开服务器

五、打包css

安装loader
npm install style-loader css-loader --save-dev

配置loader

在webpack.config.js文件里配置module中的rules，如下：

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。

module.exports = {
    /*入口和出口文件可以不用配置，默认*/

    module:{
      rules:[
        {
          test:/\.css$/,
          use:['style-loader','css-loader']//引入的顺序至关重要,不可改变
        }
      ]
    }
}

测试是否打包成功
- 在src下创建index.css文件
- 在index.js中引入index.css文件
  require('!style-loader!css-loader!./index.css');
- 进行打包后运行 npm run dev（之前配置好，详见第一篇文章：webpack4 基础配置）
  红色的背景，控制台输出hello

------------

六、使用babel编译ES6

babel转化语法所需依赖项：
- babel-loader：负责 es6 语法转化
- babel-core： babel核心包
- babel-preset-env：告诉babel使用哪种转码规则进行文件处理

安装依赖

npm install babel-loader @babel/core @babel/preset-env --save-dev

配置webpack.config.js文件

      {
      test:/\.js$/,
      exclude:/node_modules/,
      use:'babel-loader'
    }

新建 .babelrc 文件配置转换规则
```
{
  "presets":["@babel/preset-env"]
}
```

或者直接在webpack.config.js文件中配置规则

      {
      test:/\.js$/,
      exclude:/node_modules/,
      use:{
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env']
          }
      }
    }

七、提取分离打包css

前面讲过将css文件引入到js文件中，然后一起打包成js文件，现在我们学习单独提取分离css并且打包。

安装插件min-css-extract-plugin

npm install mini-css-extract-plugin --save-dev

配置webpack.config.js

引入插件
const MiniCssPlugin = require("mini-css-extract-plugin");

rules 设置

    {
      test:/\.css$/,
      use:[MiniCssPlugin.loader,'css-loader']
    }

plugins 设置

  new MiniCssPlugin({
    filename:'./css/[name].css'
  })

截图

运行命令打包

八、压缩优化css

压缩css,去除注释

安装插件

npm install --save-dev optimize-css-assets-webpack-plugin

配置webpack.config.js

头部引入插件

const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin") `

| 参数 | 意义 |
| ------------------------- | ------------------------------------------------------------ |
| assetNameRegExp | 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是<br/>/.css$/g |
| cssProcessor | 用于压缩和优化CSS 的处理器，默认是 cssnano. |
| cssProcessorPluginOptions | 传递给cssProcessor的插件选项，默认为{} |
| canPrint | 表示插件能够在console中打印信息，默认值是true |
| discardComments | 去除注释 |

在plugins模块引入

 new OptimizeCssAssetsPlugin({
       assetNameRegExp:/\.css$/g,
       cssProcessor:require("cssnano"),
       cssProcessorPluginOptions:{
         preset:['default',{discardComments:{removeAll:true}}]
       },
       canPrint:true
     })

运行打包命令之后就可以压缩
webpack --mode development

Webpack 4 学习总结

一、安装配置

二、使用配置文件进行打包

三、配置入口和出口的进阶使用

一、单出口形式

二、多出口形式

四、配置webpack-dev-server

一、了解 webpack-dev-server

二、安装webpack-dev-server

三、配置webpack.config.js文件

四、配置package.json

五、运行命令

五、打包css

六、使用babel编译ES6

七、提取分离打包css

八、压缩优化css

邢走在云端

引用和评论

Vue-cli中使用scss 的全局变量和 @mixin

webpack的入门教程

macOS上HBuildX 开发 uni-app项目，运行调试时编辑保存文件不会自动编译更新页面

开发自定义Taro插件解决跨平台难题

Vite如何自定义插件？

umi 4 踩坑

Webpack Bundle Analyzer：深入分析与优化你的包

Webpack 4 学习总结

一、安装配置

二、使用配置文件进行打包

三、配置入口和出口的进阶使用

一、单出口形式

二、多出口形式

四、配置webpack-dev-server

一、了解 webpack-dev-server

二、安装webpack-dev-server

三、 配置webpack.config.js文件

四、配置package.json

五、运行命令

五、打包css

六、使用babel编译ES6

七、提取分离打包css

八、压缩优化css

邢走在云端

引用和评论

Vue-cli中使用scss 的全局变量和 @mixin

webpack的入门教程

macOS上HBuildX 开发 uni-app项目，运行调试时编辑保存文件不会自动编译更新页面

开发自定义Taro插件解决跨平台难题

Vite如何自定义插件？

umi 4 踩坑

Webpack Bundle Analyzer：深入分析与优化你的包

三、配置webpack.config.js文件