浅析webpack源码之WebpackOptionsApply 模块(七)

30次阅读

共计 1153 个字符,预计需要花费 3 分钟才能阅读完成。

NodeEnvironmentPlugin 还做了 watch 处理,NodeWatchFileSystem 是 webpack 之所以能根据变化自己更新的核心,好凌乱,我们先从那个坑跳出来
compiler.options = new WebpackOptionsApply().process(options, compiler);
进入 WebpackOptionsApply.js 这个大坑
进入这个页面看到前面一大堆的模块引入,已经给跪了,但是马马虎虎的完成也比放弃好前面一大堆的引入,主要是 lib 下 dependencies 和 optimize 文件夹下的模块
class WebpackOptionsApply extends OptionsApply {
constructor() {
super();
}
process(options, compiler) {

}
}
OptionsApply 父类就只是定义了接口主要核心在 process 方法里主要做了
1. 处理 options.target 参数
2. 处理 options.output,options.externals,options.devtool 参数
3. 对于引用了巨量的模块把把 this 指向 compiler 对象
new CompatibilityPlugin().apply(compiler);
new HarmonyModulesPlugin(options.module).apply(compiler);
new AMDPlugin(options.module, options.amd || {}).apply(compiler);
new CommonJsPlugin(options.module).apply(compiler);
new LoaderPlugin().apply(compiler);
new NodeStuffPlugin(options.node).apply(compiler);
//…
4. 处理 options.optimization 的 moduleIds 和 chunkIds 属性
5. 处理如下插件
new TemplatedPathPlugin().apply(compiler);

new RecordIdsPlugin({
portableIds: options.optimization.portableRecords
}).apply(compiler);

new WarnCaseSensitiveModulesPlugin().apply(compiler);
6.hooks 事件流
终极总结
这个模块主要是根据 options 选项的配置,设置 compile 的相应的插件,属性,里面写了大量的 apply(compiler); 使得模块的 this 指向 compiler 没有对 options 做任何处理
过!!!

正文完
 0