从前的代码书写方式

在 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()


存在的问题：

  2. 引入多个 JavaScript 文件，多次发送 HTTP 请求；
  3. 在 index.js 中的代码中不能看出各个构造函数到底是在哪个文件中定义的。比如，需要查看 index.html 的代码，才能知道原来 Header 构造函数是在 ./header.js 文件中定义的；
  4. 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 语法的。

使用 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。