Webpack原理 如何打包，看懂这篇文章就够了，面试必备技能

前言

作为一个前端“攻城狮”，Webpack 再熟悉不过了，Webpack 能做的事太多了，可以将所有资源（包括 JS，TS，JSX，图像，字体和 CSS 等）打包后置于依赖关系中，使你可以按照需求引用依赖来使用资源。Webpack 很出色的完成了转译前端多种文件资源，分析复杂模块依赖的工作，并且我们还可以自定义 loader，自由的加载我们自己的资源，那 Webpack 是如何实现打包的呢？今天来我们一起来看下。

想要知道 Webpack 打包原理的我们需要提前知道两个知识点

1、什么是 require？

说到 require 首先想到的可能就是 import，import 是 es6 的一个语法标准,

​ – require 是运行时调用，因此 require 理论上可以运用在代码的任何地方；

​ – import 是编译时调用，因此必须放在文件开头；

在我们使用 Webpack 进行编译的时候会使用 babel 把 import 转译成 require，在 CommonJS 中，有一个全局性方法 require()，用于加载模块, AMD、CMD 也采用的 require 方式来引用。

例如：

-   var add = require('./a.js');
-   add(1,2) 

简单看来 require 其实就是一个函数，引用的 ./a.js 只是函数的一个参数。

2、什么是 exports？

在这里我们可以认为 exports 是一个对象，