Webpack(二)：核心特性

最新推荐文章于 2024-04-02 21:03:12 发布

莫亓

最新推荐文章于 2024-04-02 21:03:12 发布

阅读量720

点赞数

分类专栏：学习笔记📒 文章标签： webpack

本文链接：https://blog.csdn.net/Bule_daze/article/details/105817182

版权

本文详细介绍了如何使用 Webpack 实现模块化打包，包括安装核心模块与 CLI，配置打包过程，以及工作模式。还探讨了通过 Loader 负责特殊资源加载，利用插件扩展 Webpack 功能，如自动清理输出目录、生成 HTML 以及复制文件。文章深入浅出地解析了 Webpack 的运行机制和核心工作原理。

摘要由CSDN通过智能技术生成

上一篇的最后提出了对模块化打包方案或工具的诉求：

能够将散落的模块打包到一起；

能够编译代码中的新特性；

能够支持不同种类的前端资源模块。

目前，前端领域有一些工具能够很好的满足以上这 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>
</body>