NormalModuleReplacementPlugin

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

這對(duì)于允許不同構(gòu)建之間的不同行為非常有用。

new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource);

Note：
?resourceRegExp? 是針對(duì)你在代碼中編寫(xiě)的請(qǐng)求進(jìn)行測(cè)試的，而不是解析的資源。例如，當(dāng)你寫(xiě)了一段 ?import sum from './sum'? 的代碼時(shí)，?'./sum'? 將會(huì)被用來(lái)測(cè)試而不是 ?'./sum.js'?。

Basic Example

在為開(kāi)發(fā)環(huán)境構(gòu)建時(shí)替換特定模塊。

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

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

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

Advanced Example

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

假設(shè)您想要一個(gè)針對(duì)不同構(gòu)建目標(biāo)具有特定值的配置。

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)建兩個(gè)配置文件:

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中尋找的關(guān)鍵字導(dǎo)入該配置:

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

現(xiàn)在，您可以根據(jù)要構(gòu)建的目標(biāo)導(dǎo)入正確的配置:

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

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