webpack loader vs plugin
loader 和 plugin 差异
在 webpack 中，loader 和 plugin 是两个不同的概念，它们分别用于不同的任务。
Loader 用于对模块的源代码进行转换，将非 JavaScript 文件（如 TypeScript、ES6+、Sass、Less 等）转换为 webpack 可以处理的有效模块，并且可以链式调用多个 loader 对文件进行处理。例如，babel-loader 用于将 ES6+ 代码转换为向后兼容的 JavaScript，css-loader 用于解析处理 CSS 文件等。
Plugin 用于执行更广泛的任务，它可以用于执行各种任务，包括打包优化、资源管理、注入环境变量等。插件可以监听 webpack 构建生命周期的事件，并在适当的时机执行自定义的任务。例如，html-webpack-plugin 用于根据模板自动生成 HTML 代码，clean-webpack-plugin 用于清理每次打包下没有使用的文件，uglifyjs-webpack-plugin 用于压缩混淆 JS 代码等。
因此，可以简单地理解为 loader 用于处理模块的源代码转换，而 plugin 用于执行更广泛的构建任务和优化。在 webpack 的配置中，loader 通常用于 module.rules，而 plugin 通过 plugins 属性进行配置。
常用 loader
| Loader | 功能 |
|---|---|
| style-loader | 将 CSS 代码注入到 DOM 中的 style 标签中 |
| css-loader | 解析 CSS 文件，处理 @import 和 url() 等语句 |
| less-loader | 将 Less 文件编译为 CSS |
| sass-loader | 将 Sass/SCSS 文件编译为 CSS |
| raw-loader | 将文件以字符串的形式导入 |
| file-loader | 处理文件，将文件复制到输出目录，并返回相对 URL |
| url-loader | 类似 file-loader，但可以将小文件转换为 base64 URL |
| csv-loader | 解析 CSV 文件 |
| xml-loader | 解析 XML 文件 |
| mocha-loader | 在 Mocha 测试框架中运行测试 |
| jshint-loader | 使用 JSHint 进行 JavaScript 代码的静态分析 |
| eslint-loader | 使用 ESLint 进行 JavaScript 代码的静态分析 |
| babel-loader | 将 ES6+ 代码转换为向后兼容的 JavaScript |
| coffee-loader | 将 CoffeeScript 代码编译为 JavaScript |
| ts-loader | 将 TypeScript 代码编译为 JavaScript |
常用 plugin
| 插件名称 | 功能 |
|---|---|
| html-webpack-plugin | 根据模板自动生成 HTML 代码，并自动引用 CSS 和 JS 文件 |
| extract-text-webpack-plugin | 将 JS 文件中引用的样式单独抽离成 CSS 文件 |
| optimize-css-assets-webpack-plugin | 快速去重不同组件中重复的 CSS |
| webpack-bundle-analyzer | webpack 的 bundle 文件分析工具，以可交互缩放的 treemap 形式展示 bundle 文件 |
| compression-webpack-plugin | 生产环境可采用 gzip 压缩 JS 和 CSS |
| happypack | 通过多进程模型来加速代码构建 |
| clean-webpack-plugin | 清理每次打包下没有使用的文件 |
| MiniCssExtractPlugin | 将 CSS 提取为独立的文件，支持按需加载 CSS 和 source map |
| CopyWebpackPlugin | 复制文件和文件夹，用于构建结束后复制一些静态资源到输出目录 |
| ImageminWebpackPlugin | 用于压缩图片文件 |
| ProvidePlugin | 在每个模块中注入变量，使其在所有模块中可用，无需显式引入 |
| BundleAnalyzerPlugin | 分析 bundle 内容，帮助优化构建输出 |
| DefinePlugin | 允许在编译时创建全局常量，可以在开发和生产构建中使用不同的值 |
| HotModuleReplacementPlugin | 在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面 |
| FriendlyErrorsWebpackPlugin | 友好地输出 webpack 构建信息和错误日志 |
| DllPlugin 和 DllReferencePlugin | 用于分离第三方库，提高构建速度 |