前言
为了提高你的阅读体验，请你先把webpack基本的用法阅读一遍.....
webpack基本配置
话不多说，先把官网配置复制一份，都是一些比较简单易懂的配置
const path = require('path');
module.exports = {
mode: 'development',
// 入口文件
entry: {
index: './src/index.js',
},
// 打包出口文件
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 解析模块所用的loader
module: {
rules: [
{
test: /\.css$/,
use: ['css-loader'],
},
],
},
// 插件s
plugins: []
};
在这里我就不多说这些配置的作用了，因为篇幅太长也影响感受（深有体会的说），详情就看这里吧，传送门（https://www.cnblogs.com/jinzhou/p/9269854.html）。然后在我们的文章里主要讲述的是webpack的基本流程，所以我们就先把流程中必须用到的Tapable 说一说。
Tapable
Webpack 本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是 tapable，Webpack 中最核心的，负责编译的和负责创建 bundles 的
都是 tapable 构造函数的实例。(红色的看不懂不重要，下次会说...莫慌)
const {
SyncHook,
SyncBailHook,
SyncWaterfallHook,
SyncLoopHook,
AsyncParallelHook,
AsyncParallelBailHook,
AsyncSeriesHook,
AsyncSeriesBailHook,
AsyncSeriesWaterfallHook
} = require("tapable");
好啦，我们也不是主要讲这个的啦，所以还是靠你自己去看//www.greatytc.com/p/273e1c9904d2这文章很详细，在我们这里够用了。
流程图
图片可能比较大，毕竟webpack也不简单嘛，我们慢慢折腾。第一章我们就先说webpack.js吧，听名字就知道是我们的入口位置了。
webpack.js
引入什么的我就不多bb了啊，直入主题，直接贴关键代码哈
//options = new WebpackOptionsDefaulter().process(options);这一行的关键字Default，
//通过关键字我们可以猜测到这个类的作用就是将我们webpack.config.js中自定义的部分，覆盖webpack默认的配置。
options = new WebpackOptionsDefaulter().process(options);
// new Compiler(options.context)，非常重要的编译器，基本上编译的流程就是出自这个类。
// options.context这个值是当前文件夹的绝对路径
compiler = new Compiler(options.context);
compiler.options = options;
// 将NodeEnvironmentPlugin的hooks以及自定义的插件plugins也是钩子分别挂入compiler之中，挂入之后触发environment的一些钩子
new NodeEnvironmentPlugin().apply(compiler);
if (options.plugins && Array.isArray(options.plugins)) {
for (const plugin of options.plugins) {
if (typeof plugin === "function") {
plugin.call(compiler, compiler);
} else {
plugin.apply(compiler);
}
}
}
compiler.hooks.environment.call();
compiler.hooks.afterEnvironment.call();
// 这里又对options做处理的，如果说第一步是格式化配置，那么这边就是将配置在compiler中激活。
// 这个类很重要，因为激活了许多compiler中的钩子，同时在一些钩子上挂上（tap）了函数。
compiler.options = new WebpackOptionsApply().process(options, compiler);
1.首先我们看到 WebpackOptionsDefaulter 这个类，通过关键字Options和Defaulte我相信大家应该都能知道他是一个管理配置类，这个类作用就是将我们的配置也就是入口和出口等等的配置覆盖掉webpack基本的配置。
2.Compiler这个类异常重要。首先我们必须理解 webpack 的基本架构，是基于一种类似事件的方式，很多功能都是靠内部插件完成的，而插件如何对 webpack 产生作用的呢？其实就是通过我们的 compiler 来管理这些插件的调用，不理解没关系，我们先谨记webpack是一种插件流的思想。
3.然后我们看 compiler.options = options; 这句话，把刚刚的配置给到 compiler，目的就是让插件都可以放我们的 options 配置。
4.将 NodeEnvironmentPlugin 的 hooks 以及自定义的插件 plugins 也是钩子分别挂入compiler之中，挂入之后触发 environment 的一些钩子，而 NodeEnvironmentPlugin 这个插件就是为了管理一些本地文件的权限的，详细可以点进 NodeEnvironmentPlugin 看一下。
apply(compiler) {
compiler.inputFileSystem = new CachedInputFileSystem(
new NodeJsInputFileSystem(),
60000
);
const inputFileSystem = compiler.inputFileSystem;
compiler.outputFileSystem = new NodeOutputFileSystem();
compiler.watchFileSystem = new NodeWatchFileSystem(
compiler.inputFileSystem
);
compiler.hooks.beforeRun.tap("NodeEnvironmentPlugin", compiler => {
if (compiler.inputFileSystem === inputFileSystem) inputFileSystem.purge();
});
}
5.最后一句 new WebpackOptionsApply() 其实就是激活在 compiler 中的配置。
// 这个是parse的一个解析器，如果文件是js，就会使用到这个parse，也就是说这个是在loader的时候进行的。
new JavascriptModulesPlugin().apply(compiler);
new JsonModulesPlugin().apply(compiler);
new WebAssemblyModulesPlugin({
mangleImports: options.optimization.mangleWasmImports
}).apply(compiler);
// 这一行是用于解析也就是入口的解析，是SingleEntryPlugin还是MultiEntryPlugin。
// 这个方法相当于入口程序已经就绪，就等后续的一声令下就可以运行了。
new EntryOptionPlugin().apply(compiler);
举两个例子，这段代码就是 WebpackOptionsApply 中的，其中 JavascriptModulesPlugin 的调用就是为了初始化parser，而 EntryOptionPlugin 则是对入口的解析。这些代码我们以后会深究，现在我们只需要知道 WebpackOptionsApply 就是为了激活我们的配置。
预告
下一章我们就说说 Compiler 这个东西究竟做了什么吧！！！
