通过环境变量区分

命令⾏中指定参数

# Webpack 5 webpack —env production # Webpack 4 webpack —env.production

配置⽂件中根据环境参数进⾏判断

// webpack.config.js module.exports = (env, argv) => { const config = { mode: ‘development’ // 开发配置 } if (env.production) { config.mode = ‘production’ // ⽣产配置 } return config }

通过配置⽂件区分

在打包命令中指定配置⽂件

# 开发环境打包 webpack —config webpack.dev.conf.js # ⽣产环境打包 webpack —config webpack.prod.conf.js 有些配置在开发环境和⽣产环境都需要，因此，我们需要声明⼀个公共配置⽂件 webpack.base.conf.js 使⽤时，我们可以将 base 合并到 dev 或 prod 中。

区分打包环境 - 图1

此时，我们需要⼀个合并配置的插件：webpack-merge webpack-merge 详情：https://www.npmjs.com/package/webpack-merge

声明通⽤配置

const { resolve } = require(‘path’) module.exports = { // ⼊⼝⽂件 entry: ‘./src/index.js’, // 出⼝配置 output: { // 输出⽬录（输出⽬录必须是绝对路径） path: resolve(__dirname, ‘./dist’), // 输出⽂件名称 filename: ‘bundle.js’ }, }

声明开发配置

// webpack.dev.conf.js const { merge } = require(‘webpack-merge’) const baseWebpackConfig = require(‘./webpack.base.conf’) const webpack = require(‘webpack’) const devWebpackConfig = merge(baseWebpackConfig, { mode: ‘development’, plugins: [ new webpack.DefinePlugin({ // 开发环境下的接⼝地址 // 变量后⾯的值，是⼀段代码⽚段 API_BASE_URL: JSON.stringify(‘http://apidev.example.com‘) }), ] })

声明⽣产配置

// webpack.prod.conf.js const { merge } = require(‘webpack-merge’) const baseWebpackConfig = require(‘./webpack.base.conf’) const webpack = require(‘webpack’) const devWebpackConfig = merge(baseWebpackConfig, { mode: ‘production’, plugins: [ new webpack.DefinePlugin({ // 开发环境下的接⼝地址 // 变量后⾯的值，是⼀段代码⽚段 API_BASE_URL: JSON.stringify(‘http://apiprod.example.com‘) }), ] })