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

Question

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

在我使用导入的代码中：

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

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

Answer 1

您可以使用webpack file-replace-loader

https://www.npmjs.com/package/file-replace-loader

例：

//webpack.config.js

const resolve = require('path').resolve;

module.exports = {
  //...
  module: {
    rules: [{
      test: /\.config\.js$/,
      loader: 'file-replace-loader',
      options: {
        condition: process.env.NODE_ENV === 'development',
        replacement: resolve('./config.dev.js'),
        async: true,
      }
    }]
  }
}

Answer 2

我意识到这是一个老帖子，但这是谷歌的第一个结果之一，所以我认为更好的答案会很好。

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
        ),
        ...
    ]
}

Answer 3

你也可以像这样使用babel-loader：

//webpack.config.js

const resolve = require('path').resolve;

module.exports = {
  //...
  module: {
    strictExportPresence: true,
    rules: [{
      test: /\.config\.js$/,
      include: paths.appSrc,
      loader: require.resolve('babel-loader'),
      options: {
        plugins: [
            [
              "module-resolver",
              {
                resolvePath(sourcePath, currentFile, opts) {
                  if(process.env.NODE_ENV === 'development') {
                    return sourcePath.substr(0, sourcePath.lastIndexOf('/')) + '/config.dev.js';
                  } else {
                    return sourcePath;
                  }
                }
              }
            ]
          ]
        }
    }]
  }
}

这样，您甚至可以定义复杂的算法来确定要使用的文件。