webpack 4迁移：如何在配置文件中设置开发/生产模式？

嘿，我来帮你搞定这个Webpack 4的mode配置问题！你之前踩的坑是把mode放到了modules配置里——这可不对哦，mode是Webpack配置的顶层属性，得和entry、output这些核心配置平级才行，难怪设置了没生效～

正确的配置方式 #

直接把mode写在module.exports的根对象里就行，分环境的配置文件可以这么写：

开发环境配置（webpack.dev.js）

module.exports = {
  mode: 'development', // 这里才是正确的位置！
  entry: './src/index.js',
  output: {
    filename: 'dev-bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      // 你的loader规则，比如babel、css-loader之类的
    ]
  },
  devtool: 'inline-source-map', // 开发环境常用的源码映射
  // 其他开发环境专属配置，比如devServer
};

生产环境配置（webpack.prod.js）

module.exports = {
  mode: 'production', // 生产环境直接设为production
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: __dirname + '/dist',
    clean: true
  },
  module: {
    rules: [
      // 生产环境的loader规则
    ]
  },
  // 生产环境的优化配置，比如splitChunks、压缩插件等
};

为什么之前的写法没用？ #

Webpack 4的mode是根级别的配置选项，作用是告诉Webpack你当前处于开发还是生产环境，它会自动启用对应环境的内置优化（比如生产环境自动压缩代码、开启tree-shaking，开发环境保留源码映射）。把它放到modules里的话，Webpack根本识别不到这个配置，自然不会生效。

额外小提示 #

设置好mode之后，你就不用在命令行里加--mode production或者--mode development了，直接运行对应的配置文件就行：

• 开发环境：webpack --config webpack.dev.js
• 生产环境：webpack --config webpack.prod.js

这样Webpack会自动根据你配置的mode来启用对应的优化策略，那些烦人的警告也会消失啦～

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