在 webpack 中如何优雅的区分打包/运行环境

# 前言

日常开发工作中，有时需要区分环境是开发环境还是生产环境，来配置一些相应的设置或其他的一些处理。比如我们在使用axios请求数据时，需要判断是开发环境还是生产环境来设置他的baserURL请求地址。

# 手动配置环境变量

我们可以利用webpack自带的一个插件来手动设置全局的环境变量，如下：

配置 webpack.config.js 文件

cosnt webpack = require('webpack');

module.exprots = {
    plugins:[
        new webpack.DefinePlugin({
            NODE_FLAG: "'development'",
            // 可根据需要定义多个全局变量 
        })
    ]
}

这种方式虽然可以实现，但用起来不是很方便，一些大行项目中配置比较复杂的，这么写就会很不友好，接下来我们来看下一种。

# 不同的配置文件

我们都知道webpack的默认的配置文件名称叫作webpack.config.js，在此基础上我们可以创建三个就是文件，分别为：webpack.base.js(基础配置)、webpack.dev.js(开发环境用到) 和 webpack.prod.js(生产环境用到)。

• webpack.base.js：主要是基础配置，如入口文件和出口文件的指定等
• webpack.dev.js：开发环境配置，如devServer配置等
• webpack.prod.js：生产环境配置，如optimization等配置

webpack.base.js 文件是基础配置，这里就不多说了，我们主要看下webpack.dev.js 和 webpack.prod.js这俩文件。

这里还需要借助一个插件来合并基础配置

npm install webpack-merge -D

webpack.dev.js

const { merge } = require('webpack-merge')
const baseWebpack = require('./webpack.base.js')

module.exports = merge(baseWebpack, {
    mode: 'development',
    devServer:{
        host: 'localhost', // 域名地址
        port: '8008', // 端口
        compress: true, //服务端压缩
        hot: true, // 开启 html 热替换
        open: true, // 启动时自动在浏览器中打开.
    },
    ...
})

webpack.prod.js

const { merge } = require('webpack-merge')
const baseWebpack = require('./webpack.base.js')

module.exports = merge(baseWebpack, {
    mode: 'production',
    devtool: 'cheap--module-source-map',
    optimization: {
        ...
    },
    ...
})

配置package.json

通过配置不同的脚本命令，指定不同的配置文件

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.dev.js",
    "prod": "webpack --config webpack.prod.js"
}

如此就实现了不同环境的区分，nice ~~