webpack 打包流程

流程梳理

在开始之前我们先对于整个打包流程进行一次梳理。
这里仅仅是一个全流程的梳理，现在你没有必要非常详细的去思考每一个步骤发生了什么，我们会在接下来的步骤中去一步一步带你串联它们。

整体我们将会从上边5个方面来分析Webpack打包流程:

初始化参数阶段。
这一步会从我们配置的webpack.config.js中读取到对应的配置参数和shell命令中传入的参数进行合并得到最终打包配置参数。
开始编译准备阶段
这一步我们会通过调用webpack()方法返回一个compiler方法，创建我们的compiler对象，并且注册各个Webpack Plugin。找到配置入口中的entry代码，调用compiler.run()方法进行编译。
模块编译阶段
从入口模块进行分析，调用匹配文件的loaders对文件进行处理。同时分析模块依赖的模块，递归进行模块编译工作。
完成编译阶段
在递归完成后，每个引用模块通过loaders处理完成同时得到模块之间的相互依赖关系。
输出文件阶段
整理模块依赖关系，同时将处理后的文件输出到ouput的磁盘目录中。

接下来让我们详细的去探索每一步究竟发生了什么。

创建目录

工欲善其事，必先利其器。首先让我们创建一个良好的目录来管理我们需要实现的Packing tool吧！

让我们来创建这样一个目录:

webpack/core存放我们自己将要实现的webpack核心代码。
webpack/example存放我们将用来打包的实例项目。
webpack/example/webpak.config.js配置文件.
webpack/example/src/entry1第一个入口文件
webpack/example/src/entry1第二个入口文件
webpack/example/src/index.js模块文件
webpack/loaders存放我们的自定义loader。
webpack/plugins存放我们的自定义plugin。

初始化参数阶段

通常，我们在使用调用webpack命令时，有时会传入一定命令行参数，比如:

webpack --mode=production
# 调用webpack命令执行打包 同时传入mode为production
复制代码

webpack.config.js传递参数
另一种方式，我相信就更加老生常谈了。

我们在项目根目录下使用webpack.config.js导出一个对象进行webpack配置:

const path = require('path')// 引入loader和plugin ...
module.exports = {mode: 'development',entry: {main: path.resolve(__dirname, './src/entry1.js'),second: path.resolve(__dirname, './src/entry2.js'),},devtool: false,// 基础目录，绝对路径，用于从配置中解析入口点(entry point)和 加载器(loader)。// 换而言之entry和loader的所有相对路径都是相对于这个路径而言的context: process.cwd(),output: {path: path.resolve(__dirname, './build'),filename: '[name].js',},plugins: [new PluginA(), new PluginB()],resolve: {extensions: ['.js', '.ts'],},module: {rules: [{test: /\.js/,use: [// 使用自己loader有三种方式 这里仅仅是一种path.resolve(__dirname, '../loaders/loader-1.js'),path.resolve(__dirname, '../loaders/loader-2.js'),],},],},
};

同时这份配置文件也是我们需要作为实例项目example下的实例配置，接下来让我们修改example/webpack.config.js中的内容为上述配置吧。

当然这里的loader和plugin目前你可以不用理解，接下来我们会逐步实现这些东西并且添加到我们的打包流程中去。

实现合并参数阶段

这一步，让我们真正开始动手实现我们的webpack吧！

首先让我们在webpack/core下新建一个index.js文件作为核心入口文件。

同时建立一个webpack/core下新建一个webpack.js文件作为webpack()方法的实现文件。

首先，我们清楚在NodeJs Api中是通过webpack()方法去得到compiler对象的。

此时让我们按照原本的webpack接口格式来补充一下index.js中的逻辑:

我们需要一个webpack方法去执行调用命令。
同时我们引入webpack.config.js配置文件传入webpack方法

// index.js
const webpack = require('./webpack');
const config = require('../example/webpack.config');
// 步骤1: 初始化参数 根据配置文件和shell参数合成参数
const compiler = webpack(config);

嗯，看起来还不错。接下来让我们去实现一下webpack.js:

function webpack(options) {// 合并参数 得到合并后的参数 mergeOptionsconst mergeOptions = _mergeOptions(options);
}// 合并参数
function _mergeOptions(options) {const shellOptions = process.argv.slice(2).reduce((option, argv) => {// argv -> --mode=productionconst [key, value] = argv.split('=');if (key && value) {const parseKey = key.slice(2);option[parseKey] = value;}return option;}, {});return { ...options, ...shellOptions };
}module.export = webpack;

这里我们需要额外说明的是

webpack文件中需要导出一个名为webpack的方法，同时接受外部传入的配置对象。这个是我们在上述讲述过的。

当然关于我们合并参数的逻辑，是将外部传入的对象和执行shell时的传入参数进行最终合并。

在Node Js中我们可以通过process.argv.slice(2)来获得shell命令中传入的参数，比如:

当然_mergeOptions方法就是一个简单的合并配置参数的方法，相信对于大家来说就是小菜一碟。

恭喜大家