javascript - 如何使用 webpack 在编译时替换文件？

Question

我有一个具有多种配置的项目。第一个配置是 config.dev.js 文件，其中包含一些开发配置。我在开发模式下使用它。第二个配置是 config.js 文件。我在生产模式下使用它。

在我使用导入的代码中:

import * as config from './config.js';

我想在开发中使用第一个配置文件，在不重写所有导入的情况下将第二个配置文件用于生产。如何根据构建模式替换此配置？

Answer 1

我知道这是一篇旧帖子，但这是 Google 上的第一批结果之一，所以我认为最好有一个更好的答案。

Webpack 有一个内置的“Normal Module Replacement Plugin”。

plugins: [
  new webpack.NormalModuleReplacementPlugin(
    /some\/path\/config\.development\.js/,
    './config.production.js'
  )
]

为了我的使用，我将 env 文件放在一个变量中这是一个示例:

let envFilePath = './environment.dev.js';
if (env === 'production') {
  envFilePath = './environment.prod.js';
} else if (env === 'staging') {
  envFilePath = './environment.stg.js';
}

module.exports = {
    // other webpack stuff
    ....
    plugins:[ 
        new webpack.NormalModuleReplacementPlugin(
            /src\/environment\/environment\.js/,
            envFilePath
        ),
        ...
    ]
}