> For the complete documentation index, see [llms.txt](https://azr.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://azr.gitbook.io/webpack/zhun-bei-kai-shi/pei-zhi-wen-jian.md).

# 配置文件

## 简单配置

### 本地安装 

```javascript
$ npm i webpack -D
```

### 基本配置

新建`webpack.config.js` 文件

```javascript
const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  entry: './entry.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};
```

### 运行命令

```javascript
$ webpack --mode=development
```

### 编译打包

重新编译打包，刷新页面，就可以看到更改的样式。

> `--progress` 是可以显示打包进度的
>
> ```javascript
> $ webpack --progress --mode=development
> ```

### 配置命令

在`package.js`里面进行命令配置

```javascript
//  ... 
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": " webpack --mode=development"
  },
//  ...
```

之后，每次使用在控制台输出`npm run start`  就可以。 

## 定义规则

### rules

rules是一个数组，是由多个规则组成的。是一条模块加载时的规则链。

```javascript
module: {
      rules: [
          {
              //规则1
          },
          {
               //规则2
          }
       ]
}
```

每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)。

### 条件(condition)

条件，就是满足条件，就走这个规则，对规则的过滤条件。

最常用的条件输入是由以下四个属性共同作用的。

* test
* include
* exclude
* resource

#### **01.** test

* 一般是提供一个正则的数组。

#### 02. include

* 一般是一个字符串/字符串的数组。
* 表示目录中的哪些文件需要这个规则。
* 使用绝对路径数组。

#### 03. exclude

* 一般是一个字符串/字符串的数组。
* 使用绝对路径数组。
* 尽量避免 exclude，更倾向于使用 include
* 表示目录中的哪些文件不需要这个规则，与`include`是正好相反的。

  也就是过滤掉一些文件，最常用的是过滤掉`node_modules`中的一些文件。

e.g.

```javascript
module: {
      rules: [
          {
              test: /\.vue$/,
              use: [{
                  loader: "vue-loader"
              }],
              include: [
                   path.resolve(__dirname, "app")
              ]
          },
          {
              test: /\.js$/,
              use: [{
                  loader: "babel-loader"
              }],
              exclude: [/node_modules/]
          }
        ]
 }
```

#### 04. resource

* 匹配的是绝对路径。
* 只可以匹配一个文件。
* 和上面的test, include, exclude这三个属性相排斥，使用此属性，test, include, exclude都不会生效。

e.g.

```javascript
{
  resource: '/path/to/style.css'
}
```

> issuer 也是用来限制条件的，不怎么用。其概念为：被请求资源(requested the resource)的模块文件的绝对路径。是导入时的位置。

> 格式： issuer 条件（导入源）   issuer: { test, include, exclude }

### 结果(result)

符合条件的模块/文件怎么打包加载，一般一个规则的结果就是一个loader。

#### 01. use

`use`可以指定要用的loader（是一个对象数组，这个对象是UseEntry），一般一个rule至少有一个loader。

e.g.

```javascript
{
     test: /\.vue$/,
     use: [{
        loader: "vue-loader"
     }],
     include: [
         path.resolve(__dirname, "app")
     ]
}
```

#### 02. UseEntry

* 必须有一个`loader`属性是字符串
* 有一个`options`属性为字符串/对象
* e.g.

  ```javascript
    {     
       test: /\.css/,
       use: [{
          loader: "css-loader"
          options: { modules: true }
       }],
     }
  ```

> `use: [ { loader } ]`可以简写为`loader`，没有别的`option属`性，就可以使用采用简写
>
> e.g.\
> `use: [ { loader: “style-loader “} ]`可以简写为`use: [ “style-loader” ]`

#### **03. parser**

**parser**解析选项对象，用来禁用一些解析器，默认的解析器有以下这些

```javascript
parser: {
  amd: false, // 禁用 AMD
  commonjs: false, // 禁用 CommonJS
  system: false, // 禁用 SystemJS
  harmony: false, // 禁用 ES2015 Harmony import/export
  requireInclude: false, // 禁用 require.include
  requireEnsure: false, // 禁用 require.ensure
  requireContext: false, // 禁用 require.context
  browserify: false, // 禁用特殊处理的 browserify bundle
  requireJs: false, // 禁用 requirejs.*
  node: false, // 禁用 __dirname, __filename, module, require.extensions, require.main 等。
  node: {...} // 在模块级别(module level)上重新配置 node 层(layer)
}
```

### 嵌套规则(nested rule)

#### oneOf

规则数组，只使用这些嵌套规则之一

```javascript
{ oneOf: [ /* rules */ ] }
```

#### rules

规则数组，使用所有这些嵌套规则（合并可用条件）

```javascript
 { rules: [ /* rules */ ] }
```

#### resource

请求文件的绝对路径。已经根据 [`resolve` 规则](https://webpack.docschina.org/configuration/resolve)解析。

#### 01.resource

当使用多个条件时，所有条件都匹配，默认是数组。

```javascript
{ resource: [ /* rules */ ] }
```

#### 02. resource or

任意条件匹配时匹配

```javascript
 { resource: { or: [ /* rules */ ] } }
```

#### 03. resource  and

仅当所有条件都匹配时才匹配

```javascript
 { resource: { and: [ /* rules */ ] } }
```

#### 04. resource not

条件不匹配时匹配

```javascript
{ resource: { not: /* rules */ } }
```