一、babel-loader
这个loader用于将ES6和以上版本的JavaScript代码转换为ES5代码，从而在更早的浏览器版本中运行。
二、css-loader
css-loader会处理CSS文件，并将其转换为JavaScript模块。
三、style-loader
style-loader将处理过的CSS模块插入到DOM中，使其样式可以在网页上显示。
四、file-loader
file-loader用于处理项目中的文件，如图片、字体等，并且可以将它们输出到输出目录。
五、url-loader
这个loader可以将文件转换为base64 URL，并直接将其插入到代码中，以此来减少HTTP请求的次数。对于小型文件特别有用。
六、sass-loader
这个loader可以将Sass文件转换为CSS文件。
七、ts-loader
用于将TypeScript代码转换为JavaScript代码。
这些只是一部分常用的Webpack Loader，其实Webpack社区有大量的Loader可供选择，你可以根据自己项目的实际需求选择适合的Loader。
延伸阅读
Webpack插件(Plugins)的作用及常用插件
除了Loader，Webpack还有另一个重要的工具：插件(Plugins)。插件可以在Webpack的构建过程中执行各种各样的任务，比如清理构建目录、压缩生成的代码、生成资源清单等。
以下是一些常用的Webpack插件：
HtmlWebpackPlugin: 这个插件会自动创建一个新的HTML文件，其中包含了所有你的bundle。CleanWebpackPlugin: 这个插件会在每次构建前清理输出目录，这样可以保证每次构建的输出都是最新的。MiniCssExtractPlugin: 这个插件会将CSS从JavaScript代码中分离出来，然后在一个独立的CSS文件中输出。UglifyJsPlugin: 这个插件会压缩生成的JavaScript代码，从而减少了代码的体积。DefinePlugin: 这个插件允许你创建全局常量，这些常量在编译时就已经确定，可以在项目中任何位置使用。
京公网安备 11010802030320号