一、Loader:
babel-loader：将ES6+的代码转换成ES5的代码。
css-loader：解析CSS文件，并处理CSS中的依赖关系。
style-loader：将CSS代码注入到HTML文档中。
file-loader：解析文件路径，将文件赋值到输出目录，并返回文件路径。
url-loader：类似于file-loader，但是可以将小于指定大小的文件转成base64编码的Data URL格式
sass-loader：将Sass文件编译成CSS文件。
less-loader：将Less文件编译成CSS文件。
postcss-loader：自动添加CSS前缀，优化CSS代码等。
vue-loader：将Vue单文件组件编译成JavaScript代码。
二、Plugin：
HtmlWebpackPlugin：生成HTML文件，并自动将打包后的javaScript和CSS文件引入到HTML文件中。
CleanWebpackPlugin：清除输出目录。
ExtractTextWebpackPlugin：将CSS代码提取到单独的CSS文件中。
DefinePlugin：定义全局变量。
UglifyJsWebpackPlugin：压缩JavaScript代码。
HotModuleReplacementPlugin：热模块替换，用于在开发环境下实现热更新。
MiniCssExtractPlugin：与ExtractTextWebpackPlugin类似，将CSS代码提取到单独的CSS文件中。
BundleAnalyzerPlugin：分析打包后的文件大小和依赖关系。
以上是Webpack中常用的loader和plugin，不同的项目可能需要使用不同的loader和plugin，需要根据具体的需求进行选择和配置。
文章来源
您阅读本篇文章共花了：
发表评论