简介与配置

1. 简介

是一个模块打包工具
- 会从 entry 主文件开始分析模块间的依赖关系，并编译输出优化合并后的静态文件
- 本身只能处理 js 和 json 文件，其他类型的文件需要引入对应 loader
特色功能
- 多模块支持(modules support)
  - 包括 AMD、CommonJS 和 ES6 标准
- 代码分割（code splitting）
  - 可以按规则将代码切割成不同的块（chunk），输出为不同的包文件（bundle）
  - 实现动态 import 和按需下载使用，减少首屏时间
  - 在上线新代码后能有效利用部分包 hash 不变下的协商缓存
- 代码剪枝（tree shaking）
  - 当使用 ES6 模块且处于生产模式时，会自动标记出没有使到的函数和对象，即死代码，然后交给压缩工具去除，减少包体积
- 加载器支持（loader support）
  - 可以按需添加各种加载器，处理各种类型的资源
- 插件支持（plugin support）
  - 可以按需添加各种插件
- 独立配置文件
  - 根目录创建webpack.config.js实现配置

2. 配置

简单配置

在根目录下新建配置文件

touch webpack.config.js

填充内容
- 添加 entry 配置入口文件
- 添加 output 配置输出文件名和路径
- 添加 alias 指定别名
- 添加 rules 引入各种 loader 处理不同格式的资源文件
- 引入各种 plugin 更改构建过程

分环境配置

在根目录下新建分环境的配置文件

touch webpack.dev.js

touch webpack.prod.js

开发环境需要安装 devServer
```
npm i -D webpack-dev-server
```
- 用于本地开发的自动更新，不必每次都手动打包查看效果
- 只是将打包结果放在内存中，而不会写入实际 bundle.js
在 package.json 中，指定两个命令
- 开发启动
```
"start": "webpack-dev-server --config ./webpack.dev.js"
```
- 生产编译
```
"build": "webpack --config ./webpack.prod.js"
```
- 这种方式会产生公共部分
  - 可以单独提取为webpack.common.config.js，然后分别用对象解构引入即可
  - 也可以使用 webpack-merge 包做合并管理
使用 json 填充时，对于开发环境，直接用下面的作为配置文件，对于生产环境，需要把 devServer 配置删掉
```
module.exports = {
  entry: {},
  output: {},
  module: {
    rules: [],
  },
  plugins: [],
  devServer: {},
};
```
- 如果使用 chain 填充，可以用 when 判断环境，智能启用 devServer 配置

3. entry 入口

单入口时，可采用字符串形式赋予

input: "./src/index.js";

多入口时，采用对象形式赋予

input: {
    index: "./src/index.js",
    lib: "./src/lib.js"
}

4. output 输出

一律采用对象形式赋予

output: {
    filename: ,
    path: ,
    publicPath:
}

filename
- 指定输出资源的文件名
- 建议
```
filename: "[name].[chunkhash].js";
```
  - name 位置自动用输入时指定的名字
  - chunkhash 位置自动用与文件内容有关的哈希值
path
- 指定输出资源的存放位置，要求绝对路径
- 建议
```
path: path.join(__dirname, "dist");
```
  - 不用显示指定，webpack4 之后默认就是这个
publicPath【重要】
- 指定资源的请求位置
- 要跟 path 区分开来，这里是指用户请求一个资源时，url 应该怎么拼接
- 分为如下几种取值
  - "" 【默认】
    - 相对于当前 HTML 页面的路径
  - "./js"
    - 相对于当前 HTML 页面的路径，然后拼接 js
  - "/" 【推荐】
    - 相对于当前 host 的路径
  - "/js"
    - 相对于当前 host 的路径，然后拼接 js
  - "https://www.mycdn.com/"
    - 相对于一个 CDN 网址

5. rules 引入

基础用法

一律采用数组形式赋予，一个元素代表一条规则

rules: [
    {
        test: ,
        use: [],
        exclude: ,
        include:
    }
]

test
- 符合给定正则的文件，才会应用这个规则
- 建议
```
test: /\.文件后缀$/;
```
use
- 要应用的 loader
- 【注意!!!】应用的顺序是从数组的最后面到最前面
exclude
- 符合给定正则的路径文件夹内的资源，一律不应用这个规则
- 优先级要比 include 要高
  - 只要在里面被排除了的，再加到 include 里面也无济于事
  - 所以怎么排除 node_modules 后，又想应用到里面的 foo 和 bar 模块？
```
exclude: "/node_modules/(?!(foo|bar)/).*/";
```
include
- 符合给定正则的路径文件夹内的资源，才会应用这个规则

高级用法

enforce
- 指定这个规则在所有普通规则中的执行时机
- 可选
  - normal 默认值，表示普通规则
  - pre 在所有普通规则之前执行
  - post 在所有普通规则之后执行
- 其实不指定也可以，只要放到数组的最前面或最后面就行