从前的代码书写方式
在 html 文件里使用 script 标签引入各个 JavaScript 文件。
<!-- index.html -->
<html>
<body>
<script src="./header.js"></script>
<script src="./content.js"></script>
<script src="./footer.js"></script>
<script src="./index.js"></script>
</body>
</html>// index.js
new Header()
new Content()
new Footer()存在的问题：
- 引入多个 JavaScript 文件，多次发送 HTTP 请求；
- 在 index.js 中的代码中不能看出各个构造函数到底是在哪个文件中定义的。比如，需要查看 index.html 的代码，才能知道原来 Header 构造函数是在 ./header.js 文件中定义的；
- script 标签的书写顺序不正确会导致代码无法正确运行，不易发现问题所在，较难维护。
后来的代码书写方式
<!-- index.html -->
<html>
<body>
<script src="./index.js"></script>
</body>
</html>// index.js
import Header from './header.js'
import Content from './content.js'
import Footer from './footer.js'
new Header()
new Content()
new Footer()使用 ES6 模块语法，解决了上面提到的问题，但是，浏览器是不支持 import 语法的。
广州品牌设计公司https://www.houdianzi.com PPT模板下载大全https://redbox.wode007.com
使用 webpack
所以，在这个时候就可以使用 webpack 来将 import 语法翻译成浏览器支持的语法，但是注意不能将 webpack 完全理解为一个语法翻译工具，因为 webpack 只支持翻译模块语法，不支持翻译其他的高级语法。
接下来，安装 webpack、webpack-cli，执行 npx webpack index.js，执行结束后会生成一个 dist 目录，里面包含一个 main.js 文件。
在这个例子中，webpack 做的东西是把 index.js 中用 import 语法引入的 Header、Content 和 Footer 模块合并打包在一起并生成了 main.js 文件，最后在 index.html 文件中引入这个文件即可：
<!-- index.html -->
<html>
<body>
<script src="./dist/main.js"></script>
</body>
</html>并且，webpack 同时能识别 CommonJS、CMD 和 AMD 的模块规范，例如，这样书写也是可行的：
// index.js
const Header = require('./header.js')
const Content = require('./content.js')
const Footer = require('./footer.js')总结
（官网原文）本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。