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

AaronYuan 发布于2019-08-23 14:49 / 3514人阅读

摘要：还做了处理，是之所以能根据变化自己更新的核心，好凌乱，我们先从那个坑跳出来进入这个大坑进入这个页面看到前面一大堆的模块引入，已经给跪了，但是马马虎虎的完成也比放弃好前面一大堆的引入，主要是下和文件夹下的模块父类就只是定义了接口主要核心在方法

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做任何处理

过！！！

GPU云服务器云服务器源码浅析源码中文说明之 WebpackOptionsApply 源码编译模块

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101199.html

浅析webpack源码之Compiler.js模块(八)

摘要：小尾巴最终返回了属性挂载把引入的函数模块全部暴露出来下面暴露了一些插件再通俗一点的解释比如当你你能调用文件下的方法这个和上面的不同在于上面的是挂在函数对象上的正题要想理解必须要理解再写一遍地址我们先简单的理解它为一个通过注册插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...

PumpkinDylan 2019-08-23 14:50 评论0 收藏0
浅析webpack源码之入口函数webpack.js详解（四）

摘要：我们看到引入了对进行分析是一个很大的文件，里面规定了我们随便看一段这是对你输入的规定的要求是是其实就是本下的这样写可以提取公用的配置，避免代码冗余一共行，其中就占了行接下里进入函数引入引入了，我们在搜索链接我们看到，在文档里这样的描述的用法我们看到引入了对webpack.js const validateSchema = require(./validateSchema); con...

zone 2019-08-23 14:45 评论0 收藏0
webpack 源码分析（四）——complier模块

摘要：源码分析四模块上一篇我们看到，通过对命令行传入的参数和配置文件里的配置项做了转换包装，然后传递给的模块去编译。这一篇我们来看看做了些什么事。在上面的分析中，我们看到最核心的其实就是实例，接下来我们就看下它的类的内部逻辑。 webpack 源码分析（四）——complier模块上一篇我们看到，webpack-cli 通过 `yargs 对命令行传入的参数和配置文件里的配置项做了转换包装...

tianlai 2019-08-26 18:42 评论0 收藏0
你想要的——webpack构建过程分析

摘要：类定义了方法，用于注册插件，将插件及其回调函数以的形式保存在内部对象中又定义了，等方法来触发插件的回调函数。所以当类继承类后，也同样具有注册插件和触发回调函数的功能。说起webpack，相信对于前端工程师们而言早已经不是什么新鲜的事物。但是由于webpack有着较为复杂和灵活的配置项，所以给人的第一感觉是难以完全掌握。这次就跟大家分享一下有关webpack构建过程的相关知识，希望对...

Lycheeee 2019-08-21 17:11 评论0 收藏0
浅析webpack源码之convert-argv模块（二）

摘要：接下来我看看一下函数我们先按照分支走为读取是里的对象，饶了这大的一个圈子，那么接下来一起来看一看对你的输入配置做了怎么样的处理吧打开webpeck-cli下的convert-argv.js文件 // 定义options为空数组 const options = []; // webpack -d 检查 -d指令 if (argv.d) { //... } ...

lemon 2019-08-23 14:38 评论0 收藏0