webpack的工作步骤如下：
从入口文件开始递归地建立一个依赖关系图。
把所有文件都转化成模块函数。
根据依赖关系，按照配置文件把模块函数分组打包成若干个bundle。
通过script标签把打包的bundle注入到html中，通过manifest文件来管理bundle文件的运行和加载。
打包要解决的问题
资源加载管理 处理文件的加载顺序先后世纪 和文件的加载数量（合并、潜入、拆分）
它采用tool+ plugins 的结构，tools 提供基础能力，即文件依赖管理和资源加载管理，基础上通过一系列的 plugins 来丰富打包工具的功能。
在webpack里， 所有的文件都是模块。但是 webpack 只认识 js 模块，所以要通过 loader 插件吧css、图片等文件转化成webpack认识的模块
在 webpack 打包的文件中，模块是以模块函数来表示的，通过吧文件转换成模块函数就可以控制模块的运行时间。即加载完成后不会立即执行，等到调用模块函数的时候才会执行。
webpack的工作步骤如下：
根据依赖关系，按照配置文件把模块函数分组打包成若干个bundle。
通过script标签把打包的bundle注入到html中，通过manifest文件来管理bundle文件的运行和加载。
打包的规则为：一个入口文件对应一个bundle。该bundle包括入口文件模块和其依赖的模块。按需加载的模块或需单独加载的模块则分开打包成其他的bundle。
除了这些bundle外，还有一个特别重要的bundle，就是manifest.bundle.js文件，即webpackBootstrap。这个manifest文件是最先加载的，负责解析webpack打包的其他bundle文件，使其按要求进行加载和执行。
打包代码解析
首先分析一下 manifest 文件。
它包含三个主要变量，modules、installedModules 和 installedChunks。
modules 对象保存的是所有的模块函数。模块函数是 webpack 处理的基本单位，对应打包前的一个文件，形式为 function(module, webpack_exports, webpack_require) {…}。所有的模块函数的索引值是连续编码的，如果第一个 bundle 里的模块函数的索引是0-7，第二个 bundle 里的模块函数的索引就从8开始，从而保证索引和模块函数一一对应。
installedModules 对象保存的是模块对象。模块对象是运行模块函数得到的对象，是标准的 Commonjs 对象，其属性主要有模块id和exports对象。webpack的运行就是指执行模块函数得到模块对象的过程。
installedChunks保存的是异步加载对象的promise信息，结构为[resolve, reject, promise]。主要是用来标记异步加载模块。用promise便于异步加载模块的全局管理，如果加载超时就可以抛出js异常。
包括三个主要函数 webpackJsonpCallback，webpack_require和webpack_require.e
webpackJsonpCallback(chunkIds, moreModules, executeModules){…}是bundle文件的包裹函数。bundle文件被加载后就会运行这个函数。函数的三个参数分别对应三种模块。chunkIds指的是需要单独加载的模块的id，对应installedChunks；executeModules指的是需要立即执行的模块函数的id，对应modules，一般是入口文件对应的模块函数的id；moreModules包括该bundle打包的所有模块函数。webpackJsonpCallback先把模块函数存到modules对象中；然后处理chunkIds，调用resolve来改变promise的状态；最后处理executeModules，把对应的模块函数转化成模块对象。
webpack_require(moduleId)通过运行modules里的模块函数来得到模块对象，并保存到installedModules对象中。
webpack_require.e(chunkId)通过建立promise对象来跟踪按需加载模块的加载状态，并设置超时阙值，如果加载超时就抛出js异常。如果不需要处理加载超时异常的话，就不需要这个函数和installedChunks对象，可以把按需加载模块当作普通模块来处理。
(function(modules) { // webpackBootstrap
// modules存储的是模块函数
// The module cache，存储的是模块对象
var installedModules = {};
// objects to store loaded and loading chunks
// 按需加载的模块的promise
var installedChunks = { 2:0 };
// The require function
// require的功能是把modules对象里的模块函数转化成模块对象，
// 即运行模块函数，模块函数会把模块的export赋值给模块对象，供其他模块调用。
function __webpack_require__(moduleId) {
// Check if module is in cache
if(installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 下面开始把一个模块的代码转化成一个模块对象
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
i: moduleId,
l: false, //是否已经加载完成
exports: {} //模块输出，几乎代表模块本身
};
// Execute the module function,即运行模块函数，打包后的每个模块都是一个函数
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// Flag the module as loaded
module.l = true;
// Return the exports of the module
return module.exports;
}
// install a JSONP callback for chunk loading
var parentJsonpFunction = window["webpackJsonp"];
window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
var moduleId, chunkId, i = 0, resolves = [], result;
// 遍历chunkIds，如果对应的模块是按需加载的模块，就把其resolve函数存起来。
for(;i < chunkIds.length; i++) {
chunkId = chunkIds[i];
if(installedChunks[chunkId]) {
// 是按需加载的模块，取出其resolve函数
resolves.push(installedChunks[chunkId][0]);
}
installedChunks[chunkId] = 0; //该chunk已经被处理了
}
//遍历moreModules把模块函数存到modules中
for(moduleId in moreModules) {
if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
modules[moduleId] = moreModules[moduleId];
}
}
// 执行resolve函数，一般是__webpack_require__函数
while(resolves.length) {
resolves.shift()();
}
//遍历moreModules把模块函数转化成模块对象
if(executeModules) {
for(i=0; i < executeModules.length; i++) {
result = __webpack_require__(__webpack_require__.s = executeModules[i]);
}
}
return result;
};
__webpack_require__.e = function requireEnsure(chunkId) {
var installedChunkData = installedChunks[chunkId];
// 模块已经被处理过（加载了模块函数并转换成了模块对象），就返回promise，调用resolve
if(installedChunkData === 0) {
return new Promise(function(resolve) { resolve(); });
}
// 模块正在被加载，返回原来的promise
// 加载完后会运行模块函数，模块函数会调用resolve改变promise的状态
if(installedChunkData) {
return installedChunkData[2];
}
// 新建promise，并把resolve，reject函数和promise都赋值给installedChunks[chunkId]，以便全局访问
var promise = new Promise(function(resolve, reject) {
installedChunkData = installedChunks[chunkId] = [resolve, reject];
});
installedChunkData[2] = promise;
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
var timeout = setTimeout(onScriptComplete, 120000);
script.onerror = script.onload = onScriptComplete;
function onScriptComplete() {
script.onerror = script.onload = null;
clearTimeout(timeout);
var chunk = installedChunks[chunkId];
if(chunk !== 0) { //没有被处理
if(chunk) {// 是按需加载模块，即请求超时了
chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
}
installedChunks[chunkId] = undefined;
}
}
}
})([]);
解析并改造代码如将 import、require转换成 webpack_require
class KWebpack {
constructor(){
// 读取webpack.config.js 且初始化
}
// 构建模块
buildModules(){
}
// 生成打包文件
writeFile(){
}
// 读取本地文件
readFile(){
}
// 解析模块 将源代码解析成 ast语法树并处理
parse(){
}
// 运行模块
start(){
}
}
初始化(编译一个入口文件)
let path = require('path')
let _config = require(path.resolve('webpack.config.js'))
// 初始化配置
let defaultConfig = {
entry:'./src/main.js',
output:{
fileName:'build.js'
}
}
class KWebpack {
constructor(config){
// 读取webpack.config.js 且初始化
this.config = {...defaultConfig,...config}
this.root = process.pwd()
// 所有模块依赖
this.modules = {}
this.entry = this.config.entry
}
构建
// 1.读取本地文件
readFile(path){
return fs.readFileSync(path,'utf-8')
}
// 2.构建模块
buildModules(modulePath){
let fileContent = this.readFile(modulePath)
// 获取解析过后的内容和依赖的模块
let {resrouce,deps}= this.parse(fileContent)
this.modules['./'+path.relative(this.root,modulePath)] = resrouce
deps.forEach(dep => {
this.buildModules(path.join(path.dirname(modulePath),dep))
})
}
// 3.解析模块 将源代码解析成 ast语法树并处理
parse(data){
let deps = []
let ast = babylon.parse(data)
let root = this.root
// @babel/traverse遍历ast节点
traverse(ast, {
CallExpression(p) {
let node = p.node
if (node.callee.name === 'require') {
node.callee.name = '__webpack_require__'
// 构建新的模块路径(模块名)
let moduleName = node.arguments[0].value
// 这里作了简化处理，可能引用的还有其他模块 。
moduleName = moduleName + (path.extname(moduleName) ? '' : '.js') // ./a.js
moduleName = path.join(moduleName) // ./src/a.js
deps.push(moduleName)
}
}
})
let resrouce = generator(ast).code
return { resrouce, deps}
}
// 4.生成打包文件
writeFile(){
let templateContent = this.readFile(__dirname + '/template.js')
// 把this.moudles数组转成字符串，为了拼接到template里面。
let modulesStr = ''
Object.keys(this.modules).forEach((item)=>{
modulesStr+= `"${item}":${this.modules[item]},`
})
templateContent = templateContent.replace('__entry__',this.entry).replace('__modules_content__',modulesStr)
fs.writeFileSync(`./dist/${this.config.output.fileName}`,templateContent)
}
// 5.template.js
(function(modules) {
var installedModules = {};
function __webpack_require__(moduleId) {
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
var module = (installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
});
modules[moduleId].call(
module.exports,
module,
module.exports,
__webpack_require__
);
return module.exports;
}
// return 入口
return __webpack_require__("__entry__");
})({__modules_content__})
// 扩展 loader
// 6.修改过后的readFile方法
// 读取本地文件并且加入loader处理
readFile(path){
let _file = fs.readFileSync(path,'utf-8')
return this.handleLoader(path,_file)
}
// 7. loader 函数处理
handleLoader(path,content){
let rules = this.config.module.rules
rules.forEach((rule)=>{
let length = rule.use.length - 1;
let test = rule.test
if(test.test(path)){
do{
let lo = rule.use[length].loader || rule.use[length]
let loader = require(lo)
content = loader(content) // 这里如果引用正常的loader会报错，因为官方loader里面封装了很多方法。这里没写，所以这里代码封装了一个简单添加文字的loader。来演示
length--
}while(length > 0)
}
})
return content
}
// 8.// loaderText.js
function loader (source) {
source += '// 我是添加的loader文案'
return source
}
module.exports = loader
// 9. plugin
// 只要在constructor的时候添初始化钩子，然后在合适的地方调用即可。
这里简单说下 tapable 钩子，类似于 node 的 Events, 也是注册类似于事件，然后通过不同的钩子调用，来触发一个个事件。（实现事件流机制的 “钩子” 大方向可以分为两个类别，“同步” 和 “异步”，“异步” 又分为两个类别，“并行” 和 “串行”，而 “同步” 的钩子都是串行的）
class Compiler {
// 配置钩子
initHooks() {
// 配置钩子
this.hooks = {
entryOption: new SyncHook(),
compile: new SyncHook(),
afterCompile: new SyncHook(),
afterPlugins: new SyncHook(),
run: new SyncHook(),
emit: new SyncHook(),
done: new SyncHook()
}
}
// 注册一个调用 plugin 的方法
hanldePlugins() {
// 处理插件
let { plugins } = this.config
if (Array.isArray(plugins)) {
plugins.forEach((plugin) => {
plugin.apply(this) // 每个插件里面都会有一个apply方法来调用
})
this.hooks.afterPlugins.call(this)
}
}
// 继续修改启动项 运行模块
start(){
this.hooks.run.call(this)
this.hooks.compile.call(this)
this.buildModules(path.resolve(this.root, this.entry),this.entry)
this.hooks.afterCompile.call(this)
this.writeFile()
this.hooks.emit.call(this)
this.hooks.done.call(this)
}
}
// plugin 例子
class PluginTest{
apply(compiler) {
compiler.hooks.emit.tap('emit', function() {
console.log('现在是emit钩子触发')
})
}
}
module.exports = PluginTest
