理解webpack原理，手写一个100行的webpack
Posted 风铃唱流年
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了理解webpack原理，手写一个100行的webpack相关的知识，希望对你有一定的参考价值。
什么是webpack
他是一个模块打包器，也可以引用官网的一幅图解释，我们可以看到webpack，可以分析各个模块的依赖关系，最终打包成我们常见的静态文件，.js 、 .css 、 .jpg 、.png。今天我们先不弄那么复杂，我们就介绍webpack是怎么分析ES6的模块依赖，怎么把ES6的代码转成ES5的。
实现
由于ES6转ES5中需要用到babel，所以要用到一下插件
npm install @babel/cord @babel/traverse @babel/core @babel/preset-env --save-dev
需要的文件
使用webpack肯定少不了原文件，我们会涉及三个需要打包的js文件（entry.js、message.js、name.js）
// entry.js
import message from './message.js';
console.log(message);
// message.js
import {name} from './name.js';
export default `hello ${name}!`;
// name.js
export const name = 'world';
//bundler.js
// 读取文件信息，并获得当前js文件的依赖关系
function createAsset(filename) {//代码略}
// 从入口开始分析所有依赖项，形成依赖图，采用广度遍历
function createGraph(entry) {//代码略}
// 根据生成的依赖关系图，生成浏览器可执行文件
function bundle(graph) {//代码略}
以上是关于理解webpack原理，手写一个100行的webpack的主要内容，如果未能解决你的问题，请参考以下文章