webpack打包-----plugin

最新推荐文章于 2025-04-27 09:17:00 发布

michael_yqs

最新推荐文章于 2025-04-27 09:17:00 发布

阅读量895

点赞数

分类专栏： webpack 前端开发文章标签： webpack 前端 javascript

本文链接：https://blog.youkuaiyun.com/web_doris/article/details/116762573

版权

本文探讨了webpack中loader和plugin的区别。loader主要用于模块源码转换，如将非JavaScript文件转化为webpack可处理的形式。而plugin则用于处理loader无法实现的任务，如打包优化、清理资源文件等。文中列举了clean-webpack-plugin、html-webpack-plugin和copy-webpack-plugin等常见plugin，并介绍了自定义plugin开发，通过钩子机制清除打包结果中的多余注释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

loader 和plugin的区别

loader

loader：主要用于对模块源码的转换，因为webpack本身只支持js处理，loader描述了webpack如何处理非javascript模块，并且在build中引入这些依赖。loader可以将文件从不同css预处理转换为css,将ts转换为JavaScript，或者将内联图像转换为data URL。比如说：sass-loader、css-Loader，style-Loader、file-loader等。loader本质就是一个间件管道。

plugin

plugin作用在于解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。

常见的plugin

clean-webpack-plugin

清除资源文件

const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
   
  plugins: [
    new CleanWebpackPlugin();
  ]
}

html-webpack-plugin

自动生成使用打包结果bundle.js的 HTML

const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');//可以多次调用，一个htmlWebpackPlugin 实例生成一个页面
module.exports = {
   
  module: {
   
    rules: [
      {
   
        test: /.js$/