Webpack Config：在插件创建中查询模式选项答案

【问题标题】：Webpack Config: Querying the mode option within plugin creationWebpack Config：在插件创建中查询模式选项
【发布时间】：2018-06-08 14:19:53
【问题描述】：

如何在我的webpack.config.js 配置文件中查询mode？

这就是我想要做的。我在我的 webpack 配置中设置了 mode：

module.exports = {
  mode: 'development'
}

当我初始化mini-css-extract-plugin 时，我想检查mode 的值：

plugins: [
  new MiniCssExtractPlugin({
    filename: (mode === 'development' ? '[name].css' : '[name].[hash].css',
    chunkFilename: (mode === 'development' ? '[id].css' : '[id].[hash].css',
  })
],

显然这行不通。如何在插件初始化中查询mode？

【问题讨论】：

标签： webpack webpack.config.js mini-css-extract-plugin

【解决方案1】：

我找到了一个解决方案，可以让我访问作为参数传递的 mode，但我仍然想找到一种方法来访问配置中定义的 mode 属性。

module.exports = (env, argv) => ({
  mode: 'development',
  plugins: [
    new MiniCssExtractPlugin({
      filename: (argv.mode === 'development') ? '[name].css' : '[name].[hash].css',
      chunkFilename: (argv.mode === 'development') ? '[id].css' : '[id].[hash].css',
    }),
  ],
})

【讨论】：

您可以为不同的环境拆分不同的配置文件（使用 webpack-merge），或者按照您现在的方式进行操作。直接访问上面的模式是不可能的。

【解决方案2】：

我的想法。

运行 NODE_ENV=development webpack 和 NODE_ENV=production webpack 或 webpack

/* -------------------------------------
 *  webpack.config.js
 * ------------------------------------- */
const node_env = process.env.NODE_ENV ? process.env.NODE_ENV : 'production';
const devMode = node_env !== 'production';
if (devMode) {
   console.log('Looks like we are in development mode!');
}

module.exports = {
  mode: node_env,
...
  plugins: [
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].[hash].css' : '[name].css',
      chunkFilename: devMode ? '[id].[hash].css' : '[id].css',
      }
    })
  ],
...
}

【讨论】：