在 webpack 中分离 dev 和 prod 输出文件？

Question

我正在使用 NodeJS + Webpack 5 创建一个浏览器应用程序，我想分离开发包脚本和生产包脚本的输出目录。目前它们都编译为 ./dist/bundle.js 但我希望 npm run prod 编译为 ./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'
  }

Answer 1

根据https://webpack.js.org/guides/environment-variables/，你可以访问 webpack 配置文件中的环境变量。

所以也许你可以这样做：

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

希望对你有帮助。