前言
最近在重拾 webpack 一些知识点，希望对前端模块化有更多的理解，以前对 webpack 打包机制有所好奇，没有理解深入，浅尝则止，最近通过对 webpack 打包后的文件进行查阅，对其如何打包 JS 文件有了更深的理解，希望通过这篇文章，能够帮助读者你理解：
- webpack 单文件如何进行打包？
- webpack 多文件如何进行代码切割？
- webpack1 和 webpack2 在文件打包上有什么区别？
- webpack2 如何做到 tree shaking?
- webpack3 如何做到 scope hoisting?
本文所有示例代码全部放在我的 Github 上，看兴趣的可以看看：
git clone https://github.com/happylindz/blog.git cd blog/code/webpackBundleAnalysis npm install
webpack 单文件如何打包？
首先现在 webpack 作为当前主流的前端模块化工具，在 webpack 刚开始流行的时候，我们经常通过 webpack 将所有处理文件全部打包成一个 bundle 文件， 先通过一个简单的例子来看：
// src/single/index.js
var index2 = require('./index2');
var util = require('./util');
console.log(index2);
console.log(util);
// src/single/index2.js
var util = require('./util');
console.log(util);
module.exports = "index 2";
// src/single/util.js
module.exports = "Hello World";
// 通过 config/webpack.config.single.js 打包
const webpack = require('webpack');
const path = require('path')
module.exports = {
entry: {
index: [path.resolve(__dirname, '../src/single/index.js')],
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[chunkhash:8].js'
},
}
通过 npm run build:single 可看到打包效果，打包内容大致如下(经过精简)：
// dist/index.xxxx.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__);
module.l = true;
return module.exports;
}
return __webpack_require__(__webpack_require__.s = 3);
})([
/* 0 */
(function(module, exports, __webpack_require__) {
var util = __webpack_require__(1);
console.log(util);
module.exports = "index 2";
}),
/* 1 */
(function(module, exports) {
module.exports = "Hello World";
}),
/* 2 */
(function(module, exports, __webpack_require__) {
var index2 = __webpack_require__(0);
index2 = __webpack_require__(0);
var util = __webpack_require__(1);
console.log(index2);
console.log(util);
}),
/* 3 */
(function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(2);
})]);
内容版权声明：除非注明，否则皆为本站原创文章。