WHAT - Webpack 详解系列（三）

@PHARAOH

已于 2024-03-24 17:59:36 修改

阅读量942

点赞数 34

CC 4.0 BY-SA版权

分类专栏： Webpack 学习专栏文章标签： webpack 前端 node.js 面试

于 2024-03-24 16:20:40 首次发布

本文链接：https://blog.csdn.net/weixin_58540586/article/details/136988695

Webpack 学习专栏专栏收录该内容

7 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文深入讲解了 Webpack 的 Loader 和 Plugin 机制。Loader 用于处理各种非 JS 模块，如 CSS，通过安装和配置 css-loader 和 style-loader 实现 CSS 的打包。文章介绍了 Loader 的工作原理、常用 Loader、多个 Loader 配合使用以及开发自定义 Loader 的步骤。Plugin 机制则用于自动化处理 Webpack 构建过程中的其他任务，如清除 dist 目录、自动生成 HTML 和拷贝静态文件。文中通过 clean-webpack-plugin、html-webpack-plugin 和 copy-webpack-plugin 举例说明，展示了 Plugin 如何扩展 Webpack 的功能。文章最后探讨了 Webpack 加载任意资源的设计哲学，强调了 JavaScript 代码与资源文件的依赖关系，以及利用 Plugin 实现更广泛自动化工作的能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Webpack Loader 机制

原理

以最常见的 css 资源为例。

首先，我们如果想尝试通过 Webpack 打包项目中的一个 CSS 文件，Webpack 是如何加载资源模块的？

在下面这个案例中，我们在项目的 src 目录下添加一个普通的样式文件 main.css，具体结构和样式代码如下所示：

└─ 03-webpack-loader ························ sample root dir
    ├── src ·································· source dir
+   │   └── main.css ························· main styles
    ├── package.json ························· package file
    └── webpack.config.js ···················· webpack config file