如何通过webpack-dev-middleware设置webpack的--mode参数？

嗨，这个问题我之前也碰到过～Webpack 4新增的mode参数是用来自动适配开发/生产环境默认配置的，既然你不是通过CLI直接启动Webpack，那可以通过下面几种方式来设置：

方法一：直接在Webpack配置文件中添加mode字段 #

这是最简单直接的方式，打开你的webpack.config.js，在顶层配置里加上mode：

module.exports = {
  mode: 'development', // 或者设为 'production'
  // 你的其他配置：entry、output、module等等...
}

• 选development时，Webpack会自动开启调试友好的配置，比如保留源码映射、命名模块方便调试；
• 选production时，会自动启用代码压缩、Tree Shaking等生产环境优化，帮你打包出更小更高效的代码。

方法二：在Express代码中动态设置mode #

如果你需要根据环境变量或者其他条件动态切换mode，可以在创建Webpack编译器实例的时候修改配置：

const webpack = require('webpack');
const webpackConfig = require('./webpack.config.js');

// 这里可以根据环境变量动态设置，比如读取process.env.NODE_ENV
const envMode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
webpackConfig.mode = envMode;

// 创建编译器实例
const compiler = webpack(webpackConfig);

// 继续使用webpack-dev-middleware
app.use(require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath
}));

这种方式的好处是不用修改配置文件，就能根据运行环境自动切换mode，非常适合需要区分开发/生产部署的场景。

补充说明 #

设置mode之后，Webpack会自动帮你启用对应环境的内置插件和优化规则，省去了很多手动配置的麻烦。比如production模式下会自动开启UglifyJsPlugin压缩代码，development模式下会开启NamedModulesPlugin让你在控制台看到清晰的模块名称。

内容的提问来源于stack exchange，提问作者mancristiana