NormalModuleReplacementPlugin

?NormalModuleReplacementPlugin? 允許你用 ?newResource? 替換匹配 ?resourceRegExp? 的資源。如果 ?newResource? 是相對的，它將相對于前一個資源進行解析。如果 ?newResource? 是一個函數(shù)，它將覆蓋所提供資源的請求屬性。

這對于允許不同構建之間的不同行為非常有用。

new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource);

Note：
?resourceRegExp? 是針對你在代碼中編寫的請求進行測試的，而不是解析的資源。例如，當你寫了一段 ?import sum from './sum'? 的代碼時，?'./sum'? 將會被用來測試而不是 ?'./sum.js'?。

Basic Example

在為開發(fā)環(huán)境構建時替換特定模塊。

假設您有一個配置文件 some/path/config.development.module.js 和一個特殊版本的生產(chǎn)文件 some/path/config.production.module.js

在構建生產(chǎn)環(huán)境時添加以下插件:

new webpack.NormalModuleReplacementPlugin(
  /some\/path\/config\.development\.js/,
  './config.production.js'
);

Advanced Example

根據(jù)指定環(huán)境的條件生成。

假設您想要一個針對不同構建目標具有特定值的配置。

module.exports = function (env) {
  var appTarget = env.APP_TARGET || 'VERSION_A';
  return {
    plugins: [
      new webpack.NormalModuleReplacementPlugin(
        /(.*)-APP_TARGET(\.*)/,
        function (resource) {
          resource.request = resource.request.replace(
            /-APP_TARGET/,
            `-${appTarget}`
          );
        }
      ),
    ],
  };
};

創(chuàng)建兩個配置文件:

app/config-VERSION_A.js

export default {
  title: 'I am version A',
};

app/config-VERSION_B.js

export default {
  title: 'I am version B',
};

然后使用你在regexp中尋找的關鍵字導入該配置:

import config from 'app/config-APP_TARGET';
console.log(config.title);

現(xiàn)在，您可以根據(jù)要構建的目標導入正確的配置:

npx webpack --env APP_TARGET=VERSION_A
=> 'I am version A'

npx webpack --env APP_TARGET=VERSION_B
=> 'I am version B'