webpack-merge

配置分离

随着我们业务逻辑的增多,图片、字体、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(),
])

总结:配置文件拆分可以是我们继续扩展配置。最重要的收益是我们可以提取不同目标之间的共性。并且还可以识别要组合的较小配置部件,这些配置不见可以推送到自己的软件包以跨项目使用。还可以将配置作为依赖项进行管理,而不是在多个项目中复制类似的配置。

posted @ 2019-07-16 20:31  雨打芭蕉wt  阅读(2885)  评论(0编辑  收藏