简述

webpack的主要组成部分，Entry、Output、Loaders、Plugins

Entry(入口)

webpack开始解析关联资源的入口文件

  • 单个入口可以直接使用字符串
  • 多个入口可以使用对象进行设置
  • 使用字符串配置时，默认chunkName(key)为main
    1
    2
    3
    4
    // 单个入口
    const config = {
      entry: './path/to/my/entry/file.js'
    };

// 多个入口
const config = {
entry: {
main: ‘./path/to/my/entry/file.js’,
app: ‘./path/to/my/entry/file.js’
}
};

Output(输出)

webpack打包完成后的输出配置，包括文件命名、文件生成路径、chunkName命名等

1
2
3
4
5
6
const config = {
  output: {
    filename: 'bundle.js', // 生成的默认打包文件名
    path: '/home/proj/public/assets' // 生成的默认打包文件路径
  }
};

Loaders（加载器、更喜欢叫解析器）

webpack打包完成后只有css、html、js和一些资源文件，所以需要不用的解析器进行转化

  • 每个rules的解析顺序是从下到上执行的，顺序不可以颠倒，否则会报错
  • 每个解析器都需要手动安装（按需添加）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
  
module: {
    rules: [
      {
        test: /\.css$/, // 匹配文件
        use: [
          { loader: 'style-loader'},
          {
            loader: 'css-loader', // 配置使用的解析器
            options: { // 解析器的参数配置
              modules: true
            }
          }
        ]
      }
    ]
  }
};

Plugins（插件）

应该是webpack的支柱功能，目的在于解决其它配置无法实现的事情

1
2
3
4
5
6
7
8
module.exports = {
  
module: {
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'}) // 生成html模板 template:使用的自己的模板
    ]
  }
};