共计 2676 个字符，预计需要花费 7 分钟才能阅读完成。
在上篇文章中，我们了解了一些 webpack 的基础配置，接下来我们来进一步了解 webpack 的高级使用。
配置分离
随着我们业务逻辑的增多，图片、字体、css、ES6 以及 CSS 预处理器和后处理器逐渐的加入到我们的项目中来，进而导致配置文件的增多，使得配置文件书写起来比较繁琐，更严重者（书写特定文件的位置会出现错误）。更由于项目中不同的生产环境和开发环境的配置，使得配置文件变得更加糟糕。使用单个的配置文件会影响到任务的可重用性，随着项目需求的增长，我们必须要找到更有效地管理配置文件的方法。
管理配置文件的几种方法:
在每个环境的多个文件中维护配置，并通过 –config 参数将 webpack 指向每个文件，通过模块导入共享配置。
将配置文件推送到库，然后引用库。
将配置文件推送到工具。
维护单个配置文件的所有配置并在那里进行分支并依赖 –env 参数。
在本文中，主要介绍第四种文件配置的方法。
分离配置文件
我们在根目录下创建 config 文件夹，并创建四个配置文件：
webpack.comm.js 公共环境的配置文件
webpack.development.js 开发环境下的配置文件
webpack.production.js 生产环境下的配置文件
webpack.parts.js 各个配置零件的配置文件
合并配置文件的工具
如果配置文件被分成了许多不同的部分，那么必须以某种方式来组合他们，通常就是合并数组和对象，webpack-merge 很好的做到了这一点。
webpack-merge 做了两件事：它允许连接数组并合并对象，而不是覆盖组合。如下所示：
const merge = require(“webpack-merge”);
merge(
{a : [1],b:5,c:20},
{a : [2],b:10, d: 421}
)
// 合并后的结果
{a : [1,2] ,b :10 , c : 20, d : 421}
那么，如何合并？1. 首先将 webpack-merge 添加到项目中
npm install webpack-merge –save-dev
2. 设置各个配置文件的连接 webpack.config.js
const commConfig = require(“./config/webpack.comm”);
const developmentConfig = requie(“./config/webpack.development”);
const productionConfig = require(“./config/webpack.development”)
const merge = require(“webpack-merge”);
module.exports = mode => {
if(mode === “production”){
return merge(commConfig,productionConfig,{mode});
}
return merge(commConfig,developmentConfig,{mode});
}
注：上面代码利用 mode 的值来判断是开发环境还是生产环境
webpack.comm.js
const merge = require(“webpack-merge”);
const parts = require(“./webpack.parts”) // 引入配置零件文件
const config = {
// 书写公共配置
}
module.exports = merge([
config,
parts……
])
webpack.production.js
const merge = require(“webpack-merge”);
const parts = require(“./webpack.parts”); // 引入配置零件文件
const config = {
// 书写公共配置
}
modules.exports = merge([
config,
parts……
])
webpack.development.js
const merge = require(“webpack-merge”);
const parts = require(“./webpack.parts”); // 引入配置零件文件
const config = {
// 书写公共配置
}
modules.exports = merge([
config,
parts……
])
–env 值传参
“dev”: “webpack –env development “,
“prod”: “webpack –env production”,
“dev:server”: “webpack-dev-server –env development ”
使用 –env 允许将字符串传递给配置。我们来修改下 package.json, 使得 env 参数 mode 环境参数传入到 webpack.config.js 中，就可以判断是生产环境还是开发环境。
如何写出可配置的 webpack.parts.js 上面可以看出我们新建了一个 webpack.parts.js 文件，这个文件中主要是存放我们的一些配置零件。如何写出可配置，可拔插的配置零件。就是我们这个文件的最重要的部分。以 loadCSS 为例：
exports.loadCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => ({
module : {
rules:[{
test : reg,
include,
exclude,
use[{
loader : “style-loader”,
},{
loader : “css-loader”,
}].concat(uses),
}]
}
})
上面代码中，利用 exports 导出单个配置零件，通过解构赋值来传入参数。使用数组的 concat 来连接外部导入的 loader。参数解析：
reg: 表示 loader 匹配的 test 正则，默认为 css，这里可以是（less、sass、stylus）。include: 表示所要打包的文件夹。exclude：表示要跳过打包的文件夹。uses：外部导入的 loader。
在 webpack.development.js 中引入
module.exports = merge([
config,
parts.loadCSS({
reg : /\.less/,
use : [“less-loader”]
}),
parts.loadCSS(),
])
总结：配置文件拆分可以是我们继续扩展配置。最重要的收益是我们可以提取不同目标之间的共性。并且还可以识别要组合的较小配置部件，这些配置不见可以推送到自己的软件包以跨项目使用。还可以将配置作为依赖项进行管理，而不是在多个项目中复制类似的配置。
