Seperating dev and prod output files in webpack?-CodePudding

I'm creating a browser app using NodeJS Webpack 5 and I want to seperate the output directories of the dev and production bundle scripts. Currently both of them compile to ./dist/bundle.js but I want the npm run prod to compile to ./dist/prod.js

package.json

  ...
  "scripts": {
    "dev": "webpack --watch --mode development",
    "prod": "webpack --mode production"
  },

webpack.config.js

module.exports = {
  context: __dirname,
  entry: './src/index.js',
  output: {
    path: __dirname   '/dist',
    filename: 'bundle.js'
  },  

  ???
  outputProduction: {
    path: __dirname   '/dist',
    filename: 'prod.js'
  }

CodePudding user response：

According with this https://webpack.js.org/guides/environment-variables/ you can access environment variables on the webpack config file.

So maybe you can do something like this:

  module.exports = (env) => {
  context: __dirname,
  entry: './src/index.js',
  output: {
    path: __dirname   '/dist',
    filename: env.production ? 'prod.js' : 'bundle.js'
  },

I hope this can be helpful for you.