ContextReplacementPlugin 插件学习

ContextReplacementPlugin 替换上下文的插件

上下文(Context) 与一个带表达式的 require 语句相关，例如 require('./locale/' + name + '.json')。遇见此类表达式时，webpack 查找目录 ('./locale/') 下符合正则表达式 (/^.*.json$/)的文件。由于 name 在编译时(compile time)还是未知的，webpack 会将每个文件都作为模块引入到 bundle 中。

【这段话的意思是：上下文context这个东西和require（）这个东西有关，如果webpack遇到了这样的一个表达式，那么webpack就会到./locale这个目录下，查找所有的文件类型是json的文件，因为在编译的时候name还是不确定的，未知的，所以webpack会把locale下面的所有json文件都引入到bundle中】

上下文替换插件(ContextReplacementPlugin) 允许你覆盖查找规则，该插件有许多配置方式：

newContentResource, newContentRecursive, newContentRegExp
new webpack.ContextReplacementPlugin(
  resourceRegExp: RegExp,
  newContentResource?: string,
  newContentRecursive?: boolean,
  newContentRegExp?: RegExp
)

如果资源（或目录）符合 resourceRegExp 正则表达式，插件会替换默认资源为 newContentResource，布尔值 newContentRecursive 表明是否使用递归查找，newContextRegExp 用于筛选新上下文里的资源。如果 newContentResource 为相对路径，会相对于前一匹配资源路径去解析。

示例

new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)

限定查找 moment/locale 上下文里符合 /de|fr|hu/ 表达式的文件，因此也只会打包这几种本地化内容，（见此 GitHub issue）。【在/moment[\/\\]locale$/这个目录下，查找符合/de|fr|hu/表达式的文件，然后将这些文件打包】

newContentCallback
new webpack.ContextReplacementPlugin(
  resourceRegExp: RegExp,
  newContentCallback: (data) => void
)

newContentCallback 函数的第一形参为上下文模块工厂(ContextModuleFactory)的 data 对象，你需要覆写该对象的 request 属性。

示例

new webpack.ContextReplacementPlugin(/^\.\/locale$/, (context) => {
  if (!/\/moment\//.test(context.context)) { return; }
  Object.assign(context, {
    regExp: /^\.\/\w+/,
    request: '../../locale', // 相对路径
  });
}),

newContentResource, newContentCreateContextMap
new webpack.ContextReplacementPlugin(
  resourceRegExp: RegExp,
  newContentResource: string,
  newContentCreateContextMap: object // 将运行时请求(runtime-request)映射到编译时请求(compile-time request)
)

示例

new ContextReplacementPlugin(/selector/, './folder', {
  './request': './request',
  './other-request': './new-request'
  /* runtime-request: compile-time request */
})

以下是angular webpack starter中的源代码:

 /**
       * Plugin: ContextReplacementPlugin
          插件：ContextReplacementPlugin    
       * Description: Provides context to Angular's use of System.import
          说明：提供angular使用System.import的上下文
       *
       * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
       * See: https://github.com/angular/angular/issues/11580
       */
      new ContextReplacementPlugin(
        /**
         * The (\\|\/) piece accounts for path separators in *nix and Windows
           （\\ | \ /）部分是* nix和Windows中的路径分隔符
         */
        /angular(\\|\/)core(\\|\/)@angular/,
        helpers.root('src'), // location of your src
        {
          /**
           * Your Angular Async Route paths relative to this root directory
             相对于此根目录的Angular Async路径路径
           */
        }
      ),

上面的webpack配置主要是为了解决这个问题。

如果没有这个东西将会报错：Webpack Warning in system_js_ng_module_factory_loader.js 原文的地址：https://github.com/angular/angular/issues/11580

Christian-Yang / Translate-and-save

ContextReplacementPlugin 插件学习 #13