1

How would I go about querying the mode within my webpack.config.js configuration file?

Here's what I want to do. I have the mode set in my webpack config:

module.exports = {
  mode: 'development'
}

When I initialize the mini-css-extract-plugin I want to check the value of mode:

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

Obviously that doesn't work. How do I query mode within that plugin initialization?

Daniel D
  • 121
  • 6

2 Answers2

0

I found a solution that lets me access mode as passed as an argument but I'd still like to find a way to access the mode property as defined in the config.

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',
    }),
  ],
})
Daniel D
  • 121
  • 6
  • you either split different config files for different environments (use webpack-merge), or you do the way you doing right now. Access directly the mode above is impossible. – PlayMa256 Jun 08 '18 at 17:36
0

my idea.

run NODE_ENV=development webpack and NODE_ENV=production webpack or 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',
      }
    })
  ],
...
}
bindi
  • 121
  • 2
  • 5