1. 文件名与导出对象
webpack
通过识别webpack.config.js
文件来进行打包,如其名称所述,该文件:
- 能够对
webpack
的打包过程进行配置; - 是一个
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. 总结
-
webpack
的配置文件默认命名为webpack.config.js
,可以看做一个CommonJS
模块,通过导出的各种属性来实现配置; -
entry
指定一个或多个入口文件; -
output
指定输出文件,通常设置output.path
和output.filename
; -
module
指定各种loader
,通过设置module.rules
对象数组来配置loader
,数组中的每个对象都能解析一种或一类文件; -
plugins
指定使用的插件,需要先require
引入插件,再在plugins
的数组中使用new
声明引入的插件; -
mode
指定环境从而启用优化,可赋值production
生产环境,development
开发环境,none
不优化,默认是production
。另外,为什么使用
module.rules
而不是直接module
,知道的朋友麻烦评论/私信告知一下啊🙏🙏🙏
如有错误 ❌ ,欢迎指正 ☝️~
如有收获 🍗,可以考虑点赞👍/评论💬/收藏⭐️/关注👀,大家共同进步~