Seperating dev and prod output files in webpack?

user_10687580 0
Viewed 33

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'
  }
webpack node.js
1 Answers

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.

user_23318160
Related