Webpack 中的 Loader 和 Plugin 是两个核心概念,它们用于处理不同类型的文件和执行一些额外的构建任务。下面是一些常见的 Webpack Loader 和 Plugin:
常见 Loader:
babel-loader:
- 用于将 ECMAScript 2015+ 代码转译为向后兼容的 JavaScript。
style-loader 和 css-loader:
- style-loader 用于将 CSS 代码注入到 DOM 中。
- css-loader 用于处理 CSS 文件中的 import 和 url() 等。
file-loader 和 url-loader:
- file-loader 用于处理文件,将文件复制到输出目录,并返回文件路径。
- url-loader 类似于 file-loader,但是可以将小于指定大小的文件转换成 Data URL【就是base64,多用于图片】。
sass-loader 和 less-loader:
- 用于处理 Sass 和 Less 样式文件,并将其转换为 CSS。
image-webpack-loader:
- 用于优化和压缩图片文件。
常见 Plugin:
HtmlWebpackPlugin:
- 用于生成 HTML 文件,并将打包生成的脚本自动注入到 HTML 文件中。
MiniCssExtractPlugin:
- 将 CSS 从 bundle 中提取到单独的文件,以便异步加载样式。
- css-minimizer-webpack-plugin
- 优化和压缩css代码
- terser-webpack-plugin
- 压缩css/js
- uglifyjs-webpack-plugin
- 压缩es6
- inline-chunk-html-plugin
- 将模块内联到 html
CleanWebpackPlugin:
- 用于在每次构建前清理输出目录。
DefinePlugin:
- 用于在编译时创建全局变量,可用于配置不同环境下的构建行为。
HotModuleReplacementPlugin:
- 启用模块热替换(HMR),允许在运行时更新各种模块,而无需进行完全刷新。
Webpack-merge:
- 用于合并多个配置文件,使得配置更加灵活。
ProvidePlugin:
- 自动加载模块,而不必到处 import 或 require。
CopyWebpackPlugin:
- 用于将单个文件或整个目录复制到构建目录。
webpack常见的loader和plugin
于 2024-01-25 21:14:36 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)