webpack-不同环境下的配置

描述

在 webpack 4.x 版本中引入了 mode 的概念，在运行 webpack 时，只需要指定是 production 或者 development 两个 mode 中其中一个就能构建对应的环境。

使用

在配置文件中区分 mode

根据官方的文档多种配置类型，配置文件可以对外暴露一个函数

module.exports = (env, argv) => ({
    // ...其它配置
    optimization: {
        minize: false,
        // 使用 argv 来获取 mode 参数的值
        minimizer: argv.mode === 'production' ? [
            // mode 为 production 时 webpack 会默认使用压缩 JS 的 plugin
            new UglifyJsPLUGIN({ /* 你自己的配置 */ })，
        ] : []
    }
})

我们可以通过这个配置文件获取到 mode，根据获取值构建不同的环境，根据环境再配置特殊的 loader 和 plugin

拆分配置（webpack 3）

把 webpack 的配置按照不同的环境拆分成多个文件，运行时直接根据环境变量加载对应的配置

• webpack.base.js // 基础配置，提供个多个文件共享
• webpack.dev.js // 开发环境使用的配置
• webpack.production.js // 生产环境使用的配置

合并配置

对于 webpage 的配置，其实是对外暴露一个 JS 对象，所以我们可以使用 JS 代码来修改它

我们可以使用 webpack-merge 将对应环境的多个配置对象整合后提供给 webpack 使用

const merge = require('webpack-merge')
const base = require('./webpack.base.js')
const dev = require('./webpack.dev.js')

module.exports = merge(base,dev)