浅谈 Webpack 背后的运行机制

在平时开发中我们经常会用到 Webpack这个时下最流行的前端打包工具。它打包开发代码，输出能在各种浏览器运行的代码，提升了开发至发布过程的效率。

我们知道一份 Webpack配置文件主要包含入口( entry)、输出文件( output)、模式、加载器( Loader)、插件( Plugin)等几个部分。但如果只需要组织 JS 文件的话，指定入口和输出文件路径即可完成一个迷你项目的打包。下面我们来通过一个简单的项目来看一下 Webpack是怎样运行的。

同步加载

本文使用 webpack ^4.30.0 作示例.为了更好地观察产出的文件，我们将模式设置为 development 关闭代码压缩，再开启 source-map 支持原始源代码调试。除此之外。我们还简单的写了一个插件 MyPlugin来去除源码中的注释。

新建 src/index.js

console.log( Hello webpack! ); 

新建 webpack配置文件 webpack.config.js

const path = require( path ); 
const MyPlugin = require( ./src/MyPlugin.js ) 
 
module.exports = { 
mode: development , 
devtool: source-map , 
entry: ./src/index.js , 
output: { 
path: path.resolve(__dirname, dist ) 
}, 
plugins:[ 
new MyPlugin() 
] 
}; 

新建 src/MyPlugin.js。

class MyPlugin { 
constructor(options) { 
this.options = options 
this.externalModules = {} 
} 
apply(compiler) { 
var reg = /("([^\"]*(\.)?)*")|( ([^\ ]*(\.)?)* )|(/{2,}.*?( 
| 
))|(/*( 
|.)*?*/)|(/******/)/g 
compiler.hooks.emit.tap( CodeBeautify , (compilation)=> { 
Object.keys(compilation.assets).forEach((data)=> { 
let content = compilation.assets[data].source() // 欲处理的文本 
content = content.replace(reg, function (word) { // 去除注释后的文本 
return /^/{2,}/.test(word) || /^/*!/.test(word) || /^/*{3,}//.test(word) ? "" : word; 
}); 
compilation.assets[data] = { 
source(){ 
return content 
}, 
size(){ 
return content.length 
} 
} 
}) 
}) 
} 
} 
module.exports = MyPlugin 

现在我们运行命令 webpack --config webpack.config.js ，打包完成后会多出一个输出目录 dist： dist/main.js。 main 是 webpack 默认设置的输出文件名，我们快速瞄一眼这个文件：

(function(modules){ 
// ... 
})({ 
"./src/index.js": (function(){ 
// ... 
}) 
}); 

整个文件只含一个立即执行函数 (IIFE)，我们称它为 webpackBootstrap，它仅接收一个对象 —— 未加载的 模块集合( modules)，这个 modules 对象的 key 是一个路径， value 是一个函数。你也许会问，这里的模块是什么?它们又是如何加载的呢?

在细看产出代码前，我们先丰富一下源代码：

新文件 src/utils/math.js：

export const plus = (a, b) => {  
return a + b;  
}; 

修改 src/index.js：

import { plus } from ./utils/math.js ; 
console.log( Hello webpack! ); 
 
console.log( 1 + 2: , plus(1, 2)); 

我们按照 ES 规范的模块化语法写了一个简单的模块 src/utils/math.js，给 src/index.js 引用。Webpack 用自己的方式支持了 ES6 Module 规范，前面提到的 module 就是和 ES6 module 对应的概念。

接下来我们看一下这些模块是如何通 ES5 代码实现的。再次运行命令 webpack --config webpack.config.js后查看输出文件：

(function(modules){ 
// ... 
})({ 
"./src/index.js": (function(){ 
// ... 
}), 
"./src/utils/math.js": (function() { 
// ... 
}) 
}); 

（编辑：ASP站长网）