共计 1391 个字符,预计需要花费 4 分钟才能阅读完成。
从前的代码书写方式
在 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 语法的。
使用 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。
正文完
发表至: javascript
2019-09-15