记一次Webpack配置文件的分离

随着前端技术的发展，业务逻辑的增多及功能化的繁琐已经成为前端人员最烧脑的问题。前端自动化构建工具的出现，为前端人员带来了项目构建上的福音，成为每一个前端工程师必回的技术栈，目前比较流行的Webpack以万物皆模块的思想构建咱们的前端项目，一样也是笔者正在使用的一个前端自动化构建工具。

Webpack对于每一个前端人员来讲都不会怎么陌生，它将每个静态文件当作一个模块，通过一系列的处理为咱们整合出最后的须要的js、css、图片、字体等文件。

单个配置文件所形成的问题

本文默认电脑前的你已经了解一些Webpack基础的配置，并懂得了webpack.config.js配置文件的基础搭建。

随着咱们业务逻辑的增多，图片、字体、css、ES6以及CSS预处理器和后处理器逐渐的加入到咱们的项目中来，进而致使配置文件的增多，使得配置文件书写起来比较繁琐，更严重者（书写特定文件的位置会出现错误）。更因为项目中不一样的生产环境和开发环境的配置，使得配置文件变得更加糟糕。

使用单个的配置文件会影响到任务的可重用性，随着项目需求的增加，咱们必需要找到更有效地管理配置文件的方法。

管理配置文件的几种方法

配置文件的管理有一下几种方法。

• 在每一个环境的多个文件中维护配置，并经过--config参数将webpack指向每一个文件，经过模块导入共享配置。
• 将配置文件推送到库，而后引用库。
• 将配置文件推送到工具。
• 维护单个配置文件的全部配置并在那里进行分支并依赖--env参数。

本文以第四种方式阐述webpack配置文件的分离。

分离配置文件

咱们在根目录下建立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}
复制代码

使用webpack-merge合并配置文件

首先将webpack-merge添加到项目中

npm install webpack-merge --save-dev
复制代码

首先设置各个配置文件的链接

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值传参

使用--env容许将字符串传递给配置。咱们来修改下package.json

"dev": "webpack --env development ",
    "prod": "webpack --env production",
    "dev:server": "webpack-dev-server --env development "
复制代码

这样就使得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(),
])

复制代码

分离配置文件的好处

配置文件拆分能够是咱们继续扩展配置。最重要的收益是咱们能够提取不一样目标之间的共性。而且还能够识别要组合的较小配置部件，这些配置不见能够推送到本身的软件包以跨项目使用。还能够将配置做为依赖项进行管理，而不是在多个项目中复制相似的配置。

我本身的parts配置

展现一部分我本身的部件配置，因为在学习阶段，不足的地方还望大佬们提出，学习进步。

/** * @name 本地服务器配置 * @param host 打开的url * @param port 打开url的端口号 * */
exports.devServer = ({ host, port} = {}) => ({
    devServer : {
        stats : "errors-only",
        host,
        port,
        open : true,
        overlay : true,
    }
})
/** * @name 未从js中分离的cssLoader配置 * @param reg 匹配文件的后缀名test * @param include 所要打包的文件夹 * @param exclude 跳过打包的文件夹 * @param uses 所要向loadCSS中添加的loader */
exports.loadCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => {
    return {
        module: {
            rules: [{
                test: reg,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }].concat(uses),
                include,
                exclude,
            }]
        },
    }
}
/** * @name 从js中分离的cssLoader配置 * @param reg 匹配文件的后缀名test * @param include 所要打包的文件夹 * @param exclude 跳过打包的文件夹 * @param uses 所要向loadCSS中添加的loader * */
const MiniCssExtrectPlugin = require("mini-css-extract-plugin");
exports.extractCSS = ({reg = /\.css$/,include,exclude,uses = []} = {}) => {
    const plugin = new MiniCssExtrectPlugin({
        filename : "styles/[name]-[hash:5].css",
    })
    return {
        module: {
            rules: [{
                test: reg,
                use: [{
                    loader: MiniCssExtrectPlugin.loader,
                    options : {
                        publicPath : "../"
                    }
                }, {
                    loader: "css-loader"
                }].concat(uses),
                include,
                exclude,
            }]
        },
        plugins : [
            plugin,
        ]
    }
}
/** * @name css tree-shaking：将没有用到的css扔掉 * @param paths 监听css tree-shaking 的文件名 */
const PurifyCssPlugin = require("purifycss-webpack");
exports.purifyCSS = ({paths}) => ({
    plugins : [
        new PurifyCssPlugin({paths})
    ]
})

/** * @name autoprefixer 为css样式添加浏览器前缀 * @author wangchong */
exports.autoprefix =() =>({
    loader : "postcss-loader",
    options : {
        plugins : () => [require("autoprefixer")]
    }
})

/** * @name loadImage ：打包图片资源 * @param include 所要打包的文件夹 * @param exclude 跳过打包的文件夹 * @param options loader的options配置 */
exports.loadImage = ({include,exclude,options} = {}) => ({
    module : {
        rules : [
            {
                test : /\.(png|jpg)$/,
                include,
                exclude,
                use : {
                    loader : "url-loader",
                    options,
                }
            }
        ]
    }
})

复制代码

文章总结自：Surviejs-webpack。