配置文件中通过CommonJS模块导出一个对象，对象中的各种属性对应不同的webpack配置
注意：配置文件中的代码，必须是有效的node代码
当命令行参数与配置文件中的配置出现冲突时，以命令行参数为准。
基本配置：
- mode：编译模式，字符串，取值为development或production，指定编译结果代码运行的环境，会影响webpack对编译结果代码格式的处理
- entry：入口，字符串（后续会详细讲解），指定入口文件
- output：出口，对象（后续会详细讲解），指定编译结果文件
var path = require('path');
var MyPlugin = require('./plugins/MyPlugin');
module.exports = {
//编译模式，字符串，取值为development或production，指定编译结果代码运行的环境，会影响webpack对编译结果代码格式的处理
mode: "development",
// 入口配置的实际是chunk, 可以配置多个chunk
entry: {
// 属性名main其实是chunk的名称, 属性值是入口模块(启动模块)
main: "./src/index.js",
// 还可以配置一个chunk下, 多个入口模块. 但是不管几个入口模块, 生成的chunk还是只有1个, 仅仅是让资源列表更广而已. 导出的js中, 会按顺序运行多个入口文件
a: ["./src/index.js", "./src/a.js"],
},
// 配置打包结果运行的环境, 可选的值有: web, node
// 会影响依赖模块的解析, 比如require('fs'), 是node的内置模块, 配置为node打包就没问题. 如果配置为web就会报错
target: "web",
output: {
// path必须配置绝对路径, 表示资源放置的文件夹, 默认是dist
// 但是由于不同操作系统对路径写法要求可能不同, 不建议直接书写绝对路径, 而应该使用nodejs的内置模块path来生成绝对路径
path: path.resolve(__dirname, "target"),
// 配置的是合并后的js代码文件(非map文件)的命名规则
// 静态配置: 可以直接写文件名字符串, 如"bundle.js"
// 动态规则: 可以在中括号中, 填写规则. 可填写的规则包括
// - name: chunk名称
// - hash: 总的资源hash, 通常用于解决缓存问题. 后面跟冒号+数字, 表示取hash值的前几位
// - chunkhash: 使用每个chunk的资源的hash. 相比总的资源hash, 好处是chunk内容变化只会影响该chunk生成的资源
// - id: chunk的id, 开发环境和chunk名称一样, 生成环境是数字, 因此一般不推荐使用
filename: "[name]-[id].[hash:5].js",
// 打包后的形成的整个立即执行函数会被赋值给abc变量
library: "abc",
// 通常与library连用, 配置打包的立即执行函数暴露给谁. 可选的值包括: var, window, this, global, commonjs等, 见官网
libraryTarget: "var",
// 此配置项本身不起作用, 但是一些loader和plugin会用到它. 这些loader和plugin会在它们内部导出的url地址前面拼接上publicPath
// 通常将此配置为"/", 那么loader和plugin中的导出地址变成了绝对路径, 避免出现路径错误.(插件输出文件时的路径都是相对于dist目录的, 而实际被引用的地方的路径未必, 由此会产生错误)
// 一般情况下, 用到了publicPath的loader和plugin, 在自己本身的配置项中也会支持再次配置publicPath, 这样各个插件使用的publicPath就可能不同
publicPath: "/",
},
// 配置source-map来优化调试体验, 生成环境和开发环境的最佳实践填写见webpack官网
devtool: "source-map",
// 针对模块的配置, 目前版本只有两个配置, rules和noParse
module: {
// 模块配置规则, 可以存在多个规则
rules: [
// 每个规则是一个对象
{
// 匹配文件名的正则规则
test: /\.js$/,
// 不要处理匹配项的文件
exclude: /node_modules/,
// 匹配到之后使用哪些loader, 每个loader是一个对象
use: [
// 其中一个loader, 如果没有配置项options, 也可以不写成对象, 直接写一个loader路径的字符串
{
// loader所在的路径
loader: "loader路径",
// 向该loader传递的额外参数
// 在此配置的参数, 在loader函数中可以从this对象里读取到(webpack会在this中放入很多内容)
// 可以使用loader-utils包来帮助我们解析this对象.
// 参数配置也可以直接在loader路径上以query的方式添加, 即"/somepath/loader.js?changeVar=变量"
options: {
changeVar: '变量'
}
}
]
}
],
// 是否不要解析某个模块. 配置的内容为正则表达式. 匹配到的模块的源码直接加入到结果中, 并且不会分析其中依赖关系
// 通常用于忽略那些大型的单模块库以提高构建性能, 如jquery
noParse: /a\.js/,
},
// 配置插件
plugins: [
new MyPlugin('filelist.txt')
],
// 是否监听文件变化而重新打包
watch: true,
// 上下文配置, 该配置会影响入口和loaders的解析. 入口和loaders的相对路径会以context的配置为基准路径
// 这样, 你的配置会独立于CWD(current working directory当前执行路径)
context: path.resolve(__dirname, "app"),
// 模块解析相关配置
resolve: {
// 依赖模块的路径不是相对路径时, 模块的查找位置
modules: ["node_modules"],
// 导入模块时, 会根据此配置自动补全文件后缀名
extensions: [".js", ".json"],
// 配置别名, 会影响导入的模块的路径书写. 可以配置多个别名
alias: {
"@": path.resolve(__dirname, 'src'),
"_": __dirname,
}
},
// 表示最终的结果里面不要有所配置的模块内容, 该模块可能由使用者自行在页面导入.
// 配置的值表示整个jquery模块的导出内容就是$, 而不是大量的源码即: module.exports = $
externals: {
jquery: "$",
lodash: "_"
},
// 控制构建时,控制台输出的内容. 具体内容见官网
stats: {
// 控制台输出内容文本带颜色
colors: true,
// 控制台输出哪些模块被打包了
modules: true,
...
},
// 配置开发服务器, 见官网
devServer: {}
}
为了能够在配置中判断当前运行环境(development或production), webpack允许配置不仅是一个对象, 还可以是一个函数. 开始构建时, webpack如果发现配置文件导出的是个函数, 就会调用这个函数, 返回的结果当成配置对象. 该对象的第一个参数env, 由开发者在命令行中输入.
npx webpack --env abc # 表示env的值是"abc"
npx webpack --env.abc # 表示env的值是{abc: true}
npx webpack --env.abc=1 # 表示env的值是{abc: 1}
npx webpack --env.abc=1 --env.bcd=2 # 表示env的值是{abc: 1, bcd: 2}
module.exports = env => {
// 配置对象
}
补充知识点
-
./在模块化代码中, 比如require("./"), 表示当前模块所在的目录. 而在路径处理中,./表示node运行的目录. 即是在哪个目录下, 运行的node xxx.js - 在node环境下,
__dirname是一个全局变量, 表示当前的文件的绝对路径 - node中有一个内置模块fs, 它的
fs.resolve()函数有任意个参数, 返回值是根据参数拼接而成的绝对路径字符串
