ngc-webpack 插件学习

https://github.com/shlomiassaf/ngc-webpack

Angular compiler-cli with webpack's loader chain. webpack可以使用的angular 编译客户端。这个东西就是angular的compiler-cli的一个包装。这样就可以在webpack中对angular进行编译。

@angular/compiler-cli Wrapper for Webpack @angular/compiler-cli 包装 for Webpack

Key features: 主要特征： • Angular AOT compilation webpack plugin outside of the angular-cli eco-system angular环境系统之外的Angular AOT编译webpack插件 • Pass resources through webpack's loader chain (template, styles, etc...) 通过webpack的loader程序链传递资源（模板，样式等） • Hooks into the AOT compilation process (replaces source files, metadata files, resource files) 钩子进入AOT编译过程（替换源文件，元数据文件，资源文件） • Not restricted to a TypeScript loader, use any TS loader you want 不限于TypeScript加载器，请使用任何您想要的TS加载器（就是说没有指定特定的ts loader，你可以使用任意的loader） • Does not contain an @angular/router lazy module loader (you can use ng-router-loader) 不包含@ angular / router lazy模块加载程序（可以使用ng-router-loader）【就是说只是使用这个东西是不能完成，延迟加载的，要想完成延迟加载，那么就要使用ng-router-loader】

ngc-webpack is quite similar to @ngtools/webpack. ngc-webpack与@ ngtools/webpack非常相似。 It does not do any actual compilation, this is done by angular tools. It just allows some customization to the process. 它没有做任何实际的编译，这是由angular工具完成的。它只允许进行一些定制。 ngc-webpack is built of some constructs from @ngtools/webpack ngc-webpack是由@ngtools/webpack构建的。

Background 背景

The angular compiler generate additional JS runtime files that are part of the final bundle, these files reflect the @Component resources (html, css) as JS executable code. angular编译器生成其他JS运行时文件，这些文件作为最终捆绑包的一部分，这些文件将@Component资源（html，css）反映为JS可执行代码。

When compiling AOT we need to add them to the final bundle. AOT 编译时我们需要将它们添加到最后的捆绑。

When compiling JIT these files are added to the VM on runtime, but that's not relevant for our context. 在 JIT 编译时这些文件添加到虚拟机上运行时，但这不是我们的上下文相关。

The angular compiler performs static analysis on our app, thus it needs to run before webpack (it needs the TS files). angular的编译器会对我们的应用程序执行静态分析，因此它需要运行早于 webpack （它需要 TS 文件）。

This process create 2 problems: 此过程创建 2 个问题︰ • The generated files are not referenced in our app (webpack won't bundle them) 生成的文件不在我们的应用程序中引用（webpack 不会捆绑他们） • The Compiler compiles resources such as HTML, CSS, SCSS... 编译器将编译资源，如 HTML、 CSS、 scss

In a webpack environment we expect these resources to pass through the loader chain BEFORE they are process by the angular Compiler. This is the case when we develop using JIT. 在Webpack环境中，我们期待这些资源在angular编译器处理之前通过loader链。当我们开发使用JIT时就是这种情况。 @ngtools/webpack is the tools used by the angular-cli. @ngtools / webpack是angular-cli使用的工具。

What does ngc-webpack do?

ngc-webpack integrates with webpack to run @Component resources such as HTML, CSS, SCSS etc through the webpack loader chain. e.g. usually you will need to do some pre/post processing to your styles... ngc-webpack与webpack集成，通过webpack loader链来运行HTML，CSS，SCSS等@Component资源。例如通常您将需要对您的样式做一些预处理/后处理

If you use ngc-webpack through the plugin you can also fine tune the bundling process, this can help with reducing the bundle size, keep reading to get more information (resourceOverride). 如果您通过插件使用ngc-webpack，您还可以微调捆绑过程，这可以帮助减少捆绑包大小，继续阅读以获取更多信息（resourceOverride）。

Build steps 构建步骤

Run the compiler-cli to generate files. Use a AOT dedicated entry point to point to that file, from there on all references are fine. 运行compiler-cli生成文件。使用AOT专用的入口点来指向该文件，从所有引用都可以。 This approach requires you to have 1 extra file, no big deal. 这种方法需要你有一个额外的文件，没有什么大不了的。 The problem with this approach is the resources, compiler-cli runs before webpack so it gets raw files, e.g A SCSS file is passes as is. 这种方法的问题是资源，编译器cli在webpack之前运行，以便获取原始文件，例如SCSS文件是按原样传递的。 ngc-webpack solves this by running each of the resources through webpack using the webpack configuration file supplied. ngc-webpack通过使用提供的webpack配置文件通过webpack运行每个资源来解决这个问题。 ngc-webpack does not care about SCSS, LESS or any intermediate resource that requires transformation. ngc-webpack不关心SCSS，LESS或任何需要转换的中间资源。 Each resource will follow the chain defined in the webpack configuration supplied. You get identical result in but development and prod (with AOT) builds. 每个资源将遵循所提供的webpack配置中定义的链。您可以获得相同的结果，无论是dev和prod（使用AOT）构建。

Usage 使用

To install npm install -g ngc-webpack There are 2 approaches to running the ngc-w: 运行ngc-w有两种方法：

Build steps 构建过程

【】【】【】【】【】【】未完待续【】【】【】【】【】【】【】

如下是angular starter的代码，其中使用了ngcWebpack，配置如下：

 new ngcWebpack.NgcWebpackPlugin({
 /**
* If false the plugin is a ghost, it will not perform any action.
 如果设置AOT是false，那么disabled的值就是true，那么这个插件是一个鬼，它不会执行任何动作。
* This property can be used to trigger AOT on/off depending on your build target (prod, staging etc...)
   该属性可用于触发AOT开/关，具体取决于您的构建目标（prod，staging etc ...）
  *
  * The state can not change after initializing the plugin.
    在初始化插件后状态不能改变。【也就是说，如果在最开始的时候，
    设置了disabled的值，那么就禁用掉了这个插件，如果后来再通过其他的方式，比如函数
    ，改变成为false，那么就是，这个插件同样也已经被禁用掉了，不会再被打开】
   * @default true 默认是true
    所以AOT是true，那么！AOT就是false，所以disabled是false，所以可以使用这个插件。
  */
         disabled: !AOT,
/*
 A path to a tsconfig file, if set the AOT compilation is triggered from the plugin.
如果设置了AOT编译，则从插件触发一个tsconfig文件的路径。【编译typescript时候用的配置文件】

 When setting a tsconfig you do not need to run the compiler from the command line.
设置tsconfig时，不需要从命令行运行编译器。

 If you are not setting a config file the compilation will not run and you need to run it before webpack starts.
如果您没有设置配置文件，则编译将无法运行，并且您需要在Webpack启动之前运行它。

 When AOT compiling outside of the plugin (i.e. no tsconfig property), you can still use the  plugin to access the hooks, but remember that the hooks will run from the command line process (e.g: `ngc-w`) 
当AOT编译在插件外（即没有tsconfig属性）时，仍然可以使用插件访问钩子，但请记住钩子将从命令行进程运行（例如：`ngc-w`）
*/
tsConfig: helpers.root('tsconfig.webpack.json'),
 /**
* A path to a file (resource) that will replace all resource referenced in @Components.
  一个文件（资源）的路径，用于替换@Components中引用的所有资源。
* For each `@Component` the AOT compiler compiles it creates new representation for the templates (html, styles) of that `@Components`. 
对于每个“@ Component”，AOT编译器编译它为该“@ Components”的模板（html，styles）创建新的表示。
It means that there is no need for the source templates, they take a lot of space and they will be replaced by the content of this resource.
这意味着不需要源模板，它们占用大量的空间，它们将被这个资源的内容所取代。
 *
 * To leave the template as is set to a falsy value (the default).
    将模板设置为伪造值（默认值）。
 * TIP: Use an empty file as an overriding resource. It is recommended to use a ".js" file which
    usually has small amount of loaders hence less performance impact.
    提示：使用空文件作为覆盖资源。建议使用通常具有少量装载机的“.js”文件，从而降低性能影响。
 *
 * > This feature is doing NormalModuleReplacementPlugin for AOT compiled resources.
      这个特质是在为AOT编译资源做NormalModuleReplacementPlugin（模块替换的）的功能。
 *
 * ### resourceOverride and assets
   资源覆盖和资产
 * If you reference assets in your styles/html that are not inlined and you expect a loader (e.g. url-loader)
 * to copy them, don't use the `resourceOverride` feature as it does not support this feature at the moment.
如果您引用的styles/ html中没有内联的资源，并且希望加载程序（例如，url-loader）将其复制，则不要使用“资源覆盖”功能，因为它不支持此功能。【啥意思？？？】
  * With `resourceOverride` the end result is that webpack will replace the asset with an href to the public
 assets folder but it will not copy the files. This happens because the replacement is done in the AOT compilation phase but in the bundling it won't happen (it's being replaced with and empty file...)
使用'资源覆盖'的最终结果是webpack将用href替换资产到公共资产文件夹，但不会复制文件。 这是因为替换在AOT编译阶段完成，但在捆绑中它不会发生（它被替换为空文件...）【啥意思？？？】
  *
  * @default undefined
  */
        resourceOverride: helpers.root('config/resource-override.js')
      }),

Christian-Yang / Translate-and-save