Webpack4设置中process.env.NODE

最新的Vue Loader建议webpack4使用mini-css-extract-plugin

module: {
    rules: [
      // ... other rules omitted
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },

css的提取规则中，使用了process.env.NODE_ENV，在linux上可以在package.json的scripts中直接用NODE_ENV=development; webpack --mode=production --config webpack.config.js
这种方式设置process.env.NODE_ENV的值，但是windows不支持;的设置方式，所以可以把;换成&&，即：
NODE_ENV=development && webpack --mode=production --config webpack.config.js
不过！ 这样设置windows还是会有问题，说到底原因是windows不支持NODE_ENV=development这样赋值。
这时候就可以用cross_dev这个插件，
安装：npm i cross-env -D
然后把原先的命令变成
set NODE_ENV=development&& webpack --mode=production --config webpack.config.js
就可以了

Webpack4设置中process.env.NODE_ENV的值

评论