webpack配置梳理

---

1. 文件名与导出对象

webpack通过识别webpack.config.js文件来进行打包，如其名称所述，该文件：

1. 能够对webpack的打包过程进行配置；
2. 是一个JS文件，采用的是CommonJS语法规范，在module.exports中声明导出的内容，使用const path = require('path')的形式导入内容。

在导出的内容中，主要有5个属性：入口（entry），输出（output），loader（module），插件（plugins），模式（mode），这些对属性组合成一个对象后赋值给module.exports。

以下是一个webpack配置的大骨架：

module.exports = {
	entry: '',
	output: {},
	module: {},
	plugins:{},
	mode: ''
};

---

2. 属性说明

2.1 entry

entry指定入口文件，webpack以此来构建内部依赖图，直接指定一个文件即可：

module.exports{
	entry: './main.ts'
};

这是对entry.main对象赋值的简写方式：

module.exports = {
  entry: {
    main: './path/to/my/entry/file.js',
  },
};

也可以使用数组指定多个入口文件，或者使用对象语法分别设置entry中对象的dependOn/filename/import/library/runtime/publicPath等属性，此处不展开，可以参考📖官方文档。

2.2 output

指定将项目资源输出到哪个文件，通常设置output对象的path和filename属性：

const path = require('path')
module.exports = {
	entry: './main.ts',
	output:{
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js'
	}
};

output对象有默认值：path: './dist/', filename: main.js，📖官方文档提到对 output 属性的最低要求是设置filename。

2.3 loader（module）

webpack只能识别JS和JSON文件，其它文件都需要使用各种loader来加载。

但是loader的属性名是module（👻有点想吐槽意思哈），它结构如下：

module.exports = {
	module :{
        rules:[
            {
                
            }
        ]
    }
};

这个必须自己捋一下才能记住：module属性（而不是loader属性）用来指定各种loader，是通过设置module.rules对象数组的形式，rules里面的每个对象配置了一种文件加载方式。

先暂停一下，有个问题❓：为什么不直接把rules对象数组赋值给module啊？多套一层太麻烦了吧❗️

麻烦🙏知道的朋友解答一下疑惑！

笔者一开始以为肯定是module下还有其它属性要设置，所以不直接写成module:[]（甚至是loader:[]）的形式。但是查阅了📖官方文档也没发现其它属性了，最多也就猜测一下和设计模式相关了……所以🙏知道的大佬解答疑惑~

关于具体如何配置module.rules后续再记录📝。

2.4 plugins

首先请注意❗️，对象名称是plugins，而非plugin。

插件能实现的功能比loader更强大，loader类似于搬运工，把其它格式的文件转化为webpack可识别的形式；而插件可以进行更多样的任务，如打包优化、资源管理、注入环境变量。

更强大带来的副作用是配置插件比配置loader稍微麻烦：需要先在顶部require对应的插件，然后在plugins这里配置。

以下是一个典例：

// 添加一个插件的依赖
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 使用new声明一个插件的对象，此处的对象类型来源于上方添加的require
  plugins: [new HtmlWebpackPlugin()],
};

需要记住的有2点：

1️⃣ plugins对象是一个数组，里面是一个个使用new声明的对象，构造函数可以传参；

2️⃣ 插件对象类型需要先在顶部require引入。

同样地，具体配置后续再记录📝。

这里值得一提的是：直接在plugins赋值为数组感觉比module再套一层rules干脆多了❗️

2.5 mode

这个比较轻松，赋值字符串即可，可选值：

1️⃣ production：生产环境；

2️⃣ development：开发环境；

3️⃣ none：无。

默认值为production，会在启用各种优化，具体见📖官方文档。

---

3. 总结

1. webpack的配置文件默认命名为webpack.config.js，可以看做一个CommonJS模块，通过导出的各种属性来实现配置；

2. entry指定一个或多个入口文件；

3. output指定输出文件，通常设置output.path和output.filename；

4. module指定各种loader，通过设置module.rules对象数组来配置loader，数组中的每个对象都能解析一种或一类文件；

5. plugins指定使用的插件，需要先require引入插件，再在plugins的数组中使用new声明引入的插件；

6. mode指定环境从而启用优化，可赋值production生产环境，development开发环境，none不优化，默认是production。

   另外，为什么使用module.rules而不是直接module，知道的朋友麻烦评论/私信告知一下啊🙏🙏🙏

---

如有错误 ❌ ，欢迎指正 ☝️~

如有收获 🍗，可以考虑点赞👍/评论💬/收藏⭐️/关注👀，大家共同进步~

---