webpack常见的loader和plugin

Webpack 中的 Loader 和 Plugin 是两个核心概念，它们用于处理不同类型的文件和执行一些额外的构建任务。下面是一些常见的 Webpack Loader 和 Plugin：

常见 Loader:

1. babel-loader:

   • 用于将 ECMAScript 2015+ 代码转译为向后兼容的 JavaScript。

2. style-loader 和 css-loader:

   • style-loader 用于将 CSS 代码注入到 DOM 中。
   • css-loader 用于处理 CSS 文件中的 import 和 url() 等。

3. file-loader 和 url-loader:

   • file-loader 用于处理文件，将文件复制到输出目录，并返回文件路径。
   • url-loader 类似于 file-loader，但是可以将小于指定大小的文件转换成 Data URL【就是base64，多用于图片】。

4. sass-loader 和 less-loader:

   • 用于处理 Sass 和 Less 样式文件，并将其转换为 CSS。

5. image-webpack-loader:

   • 用于优化和压缩图片文件。

常见 Plugin:

1. HtmlWebpackPlugin:

   • 用于生成 HTML 文件，并将打包生成的脚本自动注入到 HTML 文件中。

2. MiniCssExtractPlugin:

   • 将 CSS 从 bundle 中提取到单独的文件，以便异步加载样式。
3. css-minimizer-webpack-plugin
   • 优化和压缩css代码
4. terser-webpack-plugin
   • 压缩css/js
5. uglifyjs-webpack-plugin
   • 压缩es6
6. inline-chunk-html-plugin
   • 将模块内联到 html

7. CleanWebpackPlugin:

   • 用于在每次构建前清理输出目录。

8. DefinePlugin:

   • 用于在编译时创建全局变量，可用于配置不同环境下的构建行为。

9. HotModuleReplacementPlugin:

   • 启用模块热替换（HMR），允许在运行时更新各种模块，而无需进行完全刷新。

10. Webpack-merge:

    • 用于合并多个配置文件，使得配置更加灵活。

11. ProvidePlugin:

    • 自动加载模块，而不必到处 import 或 require。

12. CopyWebpackPlugin:

    • 用于将单个文件或整个目录复制到构建目录。