上一篇的最后提出了对模块化打包方案或工具的诉求：
- 能够将散落的模块打包到一起；
- 能够编译代码中的新特性；
- 能够支持不同种类的前端资源模块。
目前，前端领域有一些工具能够很好的满足以上这 3 个需求，其中最为主流的就是 Webpack、Parcel 和 Rollup。
如何使用 Webpack 实现模块化打包？
- Webpack 作为一个模块打包工具，本身就可以解决模块化代码打包的问题，将零散的 JavaScript 代码打包到一个 JS 文件中。
- 对于有环境兼容问题的代码，Webpack 可以在打包过程中通过
Loader机制对其实现编译转换，然后再进行打包。- 对于不同类型的前端模块类型，Webpack 支持在 JavaScript 中以模块化的方式载入任意类型的资源文件，例如，我们可以通过 Webpack 实现在 JavaScript 中加载 CSS 文件，被加载的 CSS 文件将会通过 style 标签的方式工作。
- Webpack 还具备代码拆分的能力，它能够将应用中所有的模块按照我们的需要分块打包。
🌰
└─ webpack_test
├── src
│ ├── heading.js
│ └── index.js
└── index.html
// ./src/heading.js
export default () => {
const element = document.createElement('h2')
element.textContent = 'Hello webpack'
element.addEventListener('click', () => alert('Hello webpack'))
return element
}
// ./src/index.js
import createHeading from './heading.js'
const heading = createHeading()
document.body.append(heading)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack - 快速上手</title>
</head>
<body>
<script type="module" src="src/index.js"></script>
</
最低0.47元/天 解锁文章
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
