webpack中loader和plugin的区别

已于 2022-04-05 10:51:16 修改
阅读量706 收藏 7
点赞数 2
分类专栏： 开发环境 文章标签： webpack loader plugin
于 2022-03-31 22:31:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38318244/article/details/123885533
版权

loader

由于webpack只能打包commonJs的规范文件，所以针对图片、css等文件无法打包，loader专注于转化文件，完成压缩/打包/语言翻译等

  • css-loader sass-loader和style-loader是为了打包css
  • bable-loader和babel-core是为了把es6的代码转换成es5
  • url-loader和file-loader img-loader是为了把图片进行打包
  • eslint-loader某路径下的文件开启eslint
    在这里插入图片描述

Plugin

也是为了扩展webpack，作用于webpack本身：打包、优化、压缩、重新定义环境变量

  • clean-webpack-plugin 打包后文件放到dist文件前 先将dist文件清空，保证每次的内容都是最新的

  • html-webpack-plugin用于html文件的拷贝、打包,往我们的dist目录中生成一个index.html文件，并将我们打包的js文件引入到这个html中

  • webpack.DefinePlugin 定义全局变量

  • webpack.NamedModulesPlugin 热加载时直接返回文件名而不是文件id（HMR shows correct file names in console on update.
    ）

  • NoEmitOnErrorsPlugin 编译出错时跳过输出阶段

  • copyWebpackPlugin将文件或目录整个复制到构建目录

  • HotModuleReplacementPlugin 热模块自动替换插件，需要配合着webpack-dev-server进行使用，在打包文件发生改变的时候自动进行重新打包
    在这里插入图片描述

仙女爱吃鱼
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解webpack loader和plugin编写
01-19
首先我们先回顾一下webpack常见配置，因为后面会用到，所以简单介绍一下。 1.1 webpack常见配置 // 入口文件 entry: { app: './src/js/index.js', }, // 输出文件 output: { filename: '[name].bundle.js', ...
深入webpack打包原理及loader和plugin的实现
10-15
主要介绍了深入webpack打包原理及loader和plugin的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack loader和plugin的区别
weixin_38552195的博客
05-09 1704
本文主要总结了webpack的常见面试题及webpack中的重要概念，webpack loader 和 plugin 的区别。分别从产生的原因，解决了什么问题，作用的point和作用的时间范围说明了两者的不同。 为了方便理解，还列举了常用的loader和plugin。
Webpack的Loader和Plugin的区别
01-18
Loader 用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，Style-Loader等。 loader的使用很简单： 在webpack.config.js中指定loader。module.rules可以指定多个loader，对项目中的各个loader有个全局概览。 loader是运行在NodeJS中，可以用options对象进行配置。plugin可以为loader带来
webpack构建之loader与plugin的区别是什么
lee前端技术站
08-24 2481
在webpack中，loader和plugin是俩个关键的部分，常常被面试官拿来比较他们，那么他们到底有什么区别呢？ loader loader是文件加载器，能够加载资源文件，并对这些文件进行统一处理，诸如编译、压缩等，最终一起打包到指定的文件中。处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序正好相反，也就是说最后一个loader最先执行，第一个loader最后执行。第一个执行的loader的返回值接收源文件内容作为参数，其他loader接收前一个执行的loader的返回值作
webpack的loader和plugin的区别
weixin_30244889的博客
02-25 879
【Loader】：用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为dataURL。比如说：CSS-Loader，Style-Loader等。 loader的使用很简单： 在webpack.config.js中指定l...
【Webpack-2】loader 和 plugin 的区别是什么？
sparks42的博客
10-08 449
不同的作用 Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输
webpack中loader和plugin区别
Dax1_的博客
08-24 333
loader：加载器，用于单纯的转换文件，作用在一个文件上 plugin：插件，相当于一个扩展器，能够执行更加广泛的任务，丰富了webpack功能，不仅局限于功能的加载
webpack 中 loader 和 plugin 的区别是什么
weixin_45087659的博客
06-22 6873
webpack 中 loader 和 plugin 的区别是什么 loader，它是一个转换器，将A文件进行编译成B文件，比如：将A.less转换为A.css，单纯的文件转换过程。 plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务 loader： webpack自身只支持js和json这两种格式的文件，对于其他文件需要通过loader将其转换为
webpack 的 loader 和 plugin的区别
zxl645538388的博客
01-17 521
loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。从字面意思也能看出，loader是用于加载的，它作用于一个个文件上。 对于plugin，它就是一个扩展器，它丰富了wepack本身，针对是loade...
webpack loader plugin 的区别
最新发布
hongkid的专栏
08-16 440
plugin ：webpack打包过程中会埋一些事件钩子，例如emit，afteremit等等，plugin就是实现这些钩子，扩展webpack的能力，一般来说loader能做的，plugin都有对应的生命周期可以处理。loader 主要功能是告诉webpack如何加载一个一个资源，例如我们常用的vue-loader，就是告诉webpack，一个vue文件如何转化成对应的js文件；再如less-loader，告诉webpack，如何对引入的是文件里面图片资源进行加载，是按base64加载呢还是其方式？...
webpack 中 loader 和 plugin 的区别
tangdou369098655的博客
05-10 1604
通俗点讲loader是转换，plugin是执行比转换更复杂的任务，比如合并压缩等 loader:让webpack能够处理非js文件，然后你就可以利用 webpack 的打包能力，对它们进行处理。 例如：css-loader、style-loader、postcss-loader、sass-loader plugins:从打包优化和压缩，一直到重新定义环境中的变量. 例如：uglify-webpack-plugin、clean-webpack-plugin、babel-polyfill 相对于loader转换
webpack 中的 loader 和 plugin 区别是什么 各有什么用？
m0_64697285的博客
07-20 1813
plugin即为插件，是一个扩展器，丰富webpack本身，增强功能，针对的是在loader结束之后，webpack打包的整个过程，他并不直接操作文件，而是基于事件机制工作，监听webpack打包过程中的某些节点，执行广泛的任务。loader即为文件加载器，操作的是文件，将文件A通过loader转换成文件B，是一个单纯的文件转化过程。将css提取到一个单独的文件当中。他可以为每一个包含css的js文件创建一个css文件。css-loader解析css文件，并将其处理成标签注入到dom中。...
webpack Plugin 和 Loader 的区别
weixin_55182699的博客
09-12 817
webpack是一个模块打包器（module bundler），提供了一个核心，核心提供了很多开箱即用的功能，同时它可以用loader和plugin来扩展。 Loader： 用于对模块源码的转换，loader 描述了 webpack 如何处理非 javascript 模块，并且在 buld 中引入这些依赖。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或者将内联图像转换为 data URL。比如说：CSS-Loader，Style-Loader 等。
webpack loader和plugin编写
weixin_34239592的博客
10-11 527
1 基础回顾 首先我们先回顾一下webpack常见配置，因为后面会用到，所以简单介绍一下。 1.1 webpack常见配置 // 入口文件 entry: { app: './src/js/index.js', }, // 输出文件 output: { filename: '[name].bundle.js', path: path.resolve(__dir...
webpack loader与Plugin区别
慢慢manman的博客
07-08 302
loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译，压缩等，最终一起打包到指定的文件中。file-loader：文件加载。url-loader：文件加载，可以设置阈值，小于时把文件 base64 编码。image-loader：加载并压缩图片。babel-loader： ES 6+ 转成 ES 5。css-loader：处理 @import 和 url 这样的外部资源。style-loader：在 head 创建 style 标签把样式插入。vue-loader：加载 vue

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值