webpack 中的loader 和plugin的区别

10月前作者：我有一棵树分类：Toy博客阅读(36) 违法举报

这篇具有很好参考价值的文章主要介绍了webpack 中的loader 和plugin的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Loader:
- 作用： Loader 用于在模块加载时对文件进行转换。它是一个转换器，将文件从一种形式转换为另一种形式，例如，将 ES6 语法的 JavaScript 文件转换为能够在浏览器中运行的普通 JavaScript。
- 使用场景： Loader通常被配置在module.rules中，指定了哪些文件应该被哪些Loader处理。每个Loader执行一个特定的转换操作，它们串联在一起形成一个转换管道。
Plugin:
- 作用： Plugin 用于执行范围更广的任务，它可以监听Webpack构建过程中的事件，执行一些额外的任务。Plugins可以用于优化、压缩、拷贝文件等各种操作，而不仅仅是文件转换。
- 使用场景： Plugins通过在Webpack配置中的plugins数组中添加实例来配置。一个插件通常包含一个或多个钩子函数，这些函数在Webpack构建的不同阶段被调用。
- 例如，HtmlWebpackPlugin 插件用于生成HTML文件，并将打包后的脚本自动添加到HTML中：

总体而言，Loader主要用于文件的转换，而Plugin则用于执行更广泛的构建任务，如文件生成、代码优化等。它们共同组成了Webpack强大的构建工具生态系统。文章来源地址https://www.toymoban.com/news/detail-815376.html

到了这里，关于webpack 中的loader 和plugin的区别的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

Webpack的Loader和Plugin

1.1 Loader作用把js和json外的其它文件转为Webpack可以识别的模块 1.2 Loader简介 1.2.1 Loader类型 1.总类型 pre：前置loader normal：普通loader inline：内联loader post：后置loader 2.默认类型默认为normal类型 3.修改类型配置时可以通过enforce修改 pre，normal，post 类型。 1.2.2 Loader顺序 1.总顺序

2024年04月18日
浏览(42)
webpack报错：Module build failed (from ./node_modules/babel-loader/lib/index.js)

webpack打包的时候报错，报错信息如下： ERROR in ./static/js/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: this.getOptions is not a function 报错原因：使用了高版本的babel-loader，导致babel-loader和babel-core版本冲突，我降低之前babel-loader为9版本解决办法：降低babel

2024年02月12日
浏览(49)
Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js)

Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: ENOENT: no such file or directory, # 原因将static文件夹的css文件删除了 # 解决方案新建一个项目，在static文件夹中，复制customicons.css和customi

2024年02月16日
浏览(63)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): Error: PostCSS plugin autopref

使用vue+uni-app开发微信小程序运行后报错报错原因：autoprefixer版本过高解决方案：降低autoprefixer版本执行： npm i postcss-loader autoprefixer@8.0.0 然后再次运行即可成功

2024年02月16日
浏览(48)
运行 npm run build,报错：Module build failed (from ./node_modules/image-webpack-loader/index.js)

目录问题描述：解决方案：第一步卸载image-webpack-loader 第二步下载image-webpack-loader 方式一方式二第三步再次执行打包运行 npm run build,报错下载呢，有两种方式，方式一不行了就尝试方式二吧~ 方式一 --save-dev 选项的作用是将该软件包添加为项目的开发依赖项。方式二

2024年02月07日
浏览(53)
node.js+NPM包管理器+Webpack打包工具+前端项目搭建

javascript运行环境（无需依赖html文件） BFF，服务于前端的后端官网下载安装，node -v查看是否安装成功 ①、创建一个01.js文件 ②、通过CMD命令执行（或者通过工具的集成终端） node 01.js 如果出现权限原因，可以通过管理员方式打开工具 ③、通过浏览器访问http://127.0.0.1:8888 如

2024年02月07日
浏览(73)
Webapck 解决：[webpack-cli] Error: Cannot find module ‘vue-loader/lib/plugin‘ 的问题

其一、报错为： [webpack-cli] Error: Cannot find module \\\'vue-loader/lib/plugin\\\' 中文为： [webpack-cli] 错误：找不到模块“vue-loader/lib/plugin” 其二、问题描述为：在项目打包的时候 npm run build ，控制台报错，并抛出一个 Cannot find module \\\'vue-loader/lib/plugin\\\' 的问题；其三、控制台报错的页面显示

2024年02月02日
浏览(54)
AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）（七）

实操： server.js utils/lib/index.js utils/package.json 从别处（网上、其他人手中）拿到写好的项目，一般不携带node_modules文件夹（所占存储空间大）但有package.json文件，里面记载了当前项目下载过的包还有package-lock.json文件，固定软件包的版本导入模块/包，除了自己创建的模块、包

2024年01月22日
浏览(67)
详细介绍Webpack5中的Loader

loader用于帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。 pre：前置 loader normal：普通 loader，没有用enforce指定就是normal inline：内联 loader post：后置 loader pre normal inline post 相同优先级的 loader 执行顺序为：从右到左，从下到上。 1.配置方式：在 webpack.config.js 文件

2024年02月15日
浏览(47)
AJAX入门到实战，学习前端框架前必会的（ajax+node.js+webpack+git）（五）—— 项目-新闻头条-数据管理平台-ajax综合案例前端

愿许秋风知我意，解我心中意难平。推荐使用，每个程序员都有自己的管理方式。 HTML结构： 1.为什么要提取公共前缀地址（基地址），因为公司业务可能会更换服务器，如果你不想一条一条地修改请求地址的话。后续使用axios时，url不需要再写前缀。 2.请求成功与失败成

2024年01月25日
浏览(52)