Webpack 常用 loader 和 plugin 汇总

基于 Webpack 4 和 Webpack 5

Loader

名称	描述
eslint-loader	代码规范检查。eslint-config-airbnb eslint-config-alloy eslint-config-ivweb
babel-loader
postcss-loader
style-loader
css-loader
less-loader
file-loader
url-loader	和 file-loader 类似。可以将小图片等资源以 base64 方式引用
px2rem-loader

Plugin

名称	描述
clean-webpack-plugin
html-webpack-plugin	html 压缩、自动创建 html5 文件、自动引入编译后的 script 等
html-webpack-externals-plugin	将指定的资源设置成 CDN 等形式的外部引用，减少 bundle 大小
SplitChunksPlugin	公共脚本分离成公共包，并进行优化。webpack 自带
copy-webpack-plugin	将符合条件的文件复制到目标位置
friendly-errors-webpack-plugin	webpack 构建日志美化插件

CSS

名称	描述
autoprefixer	自动补全兼容前缀。配合 postcss-loader 使用
mini-css-extract-plugin	可以将 css 单独打包，支持文件指纹
optimize-css-assets-webpack-plugin	css 压缩。一般配合 cssnano 使用

JS

名称	描述
webpack-shebang-plugin	保留文件头部的 #! 等 shebang
uglifyjs-webpack-plugin	js 压缩。production 模式下自动开启

webpack-sources

webpack 自带源代码处理工具。包含了 concat、内容替换、source-map 等相关处理函数。

详见 npm

性能相关

名称	描述
speed-measure-webpack-plugin	构建速度分析。每个 loader 和 plugin 的耗时
webpack-bundle-analyzer	包体积分析
parallel-uglify-plugin	代码并行压缩
uglifyjs-webpack-plugin	代码压缩，支持并行压缩
terser-webpack-plugin	webpack5 自带的代码压缩插件，支持并行压缩
image-webpack-plugin	图片处理插件。可以进行图片压缩
purgecss-webpack-plugin	配合 mini-css-extract-plugin 删除无用的 css

静态资源内联

使用 raw-loader

// html 内联
${require('raw-loader!./meta.html')}
// js 内联
<script>${require(raw-loader!babel-loader!../node_modules/lib-flexible)}</script>

CSS 内联

1. 使用 style-loader
2. 使用 html-inline-css-webpack-plugin