NormalModuleReplacementPlugin

安装

NormalModuleReplacementPlugin 是 webpack 一个内置插件。

用法

new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource) NormalModuleReplacementPlugin允许您将与resourceRegExp匹配的资源替换为newResource。如果newResource是相对的，它相对于先前的资源被解析。如果newResource是一个函数，则期望覆盖所提供的资源的请求属性。这对于允许构建之间的不同行为是有用的。

基础示例

在构建开发环境时更换特定模块（了解更多）。如果说你有一个配置文件some/path/config.development.module.js和一个特殊的版本生产在some/path/config.production.module.js 只需在构建生产时添加以下插件：

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

高级示例

条件构建取决于环境变量（阅读更多）。假设您想要一个具有不同构建目标的特定值的配置。

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}`);
      })
    ]
  }

}

创建两个配置文件：

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);

现在你只需要导入正确的配置，具体取决于你要构建的目标：

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

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

webpack starter 中 webpack.common.js中的代码：

 /**
       * Fix Angular 2
       */
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)async/,
        helpers.root('node_modules/@angular/core/src/facade/async.js')
      ),
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)collection/,
        helpers.root('node_modules/@angular/core/src/facade/collection.js')
      ),
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)errors/,
        helpers.root('node_modules/@angular/core/src/facade/errors.js')
      ),
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)lang/,
        helpers.root('node_modules/@angular/core/src/facade/lang.js')
      ),
      new NormalModuleReplacementPlugin(
        /facade(\\|\/)math/,
        helpers.root('node_modules/@angular/core/src/facade/math.js')
      ),

webpack.prod.js中的源代码：

/**
       * Plugin: NormalModuleReplacementPlugin
       * Description: Replace resources that matches resourceRegExp with newResource
       *
       * See: http://webpack.github.io/docs/list-of-plugins.html#normalmodulereplacementplugin
       */
      new NormalModuleReplacementPlugin(
        /angular2-hmr/,
        helpers.root('config/empty.js')
      ),

      new NormalModuleReplacementPlugin(
        /zone\.js(\\|\/)dist(\\|\/)long-stack-trace-zone/,
        helpers.root('config/empty.js')
      ),

/config/empty.js 中的代码

module.exports = {
  NgProbeToken: {},
  HmrState: function() {},
  _createConditionalRootRenderer: function(rootRenderer, extraTokens, coreTokens) {
    return rootRenderer;
  },
  __platform_browser_private__: {}
};

Christian-Yang / Translate-and-save