webpack 中的loaders和plugins的区别?

使用webpack的人都知道配置webpack有entry,output,module(loader),plugins,devtool五大模块,

webpack做的就是分析代码,转换代码,编译代码,输出代码,

其中loader和pugins都是用于加载相应的组件进行打包的,但是究竟有什么区别呢?,我们来说说

1、loader

   loader是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中,webpack本身只支持js,json格式,不管我们在vue,react项目中我们都要单独配置自己loader,vue-loader或者bebal-loader等等,用于转换jsx,tsx,ts,vue等文件格式,下面一一列举了一下,

编译模块 需要的loader
react  babel-loader
vue vue-loader
typescript ts-loader
less less-loader
sass sass-loader
css css-loader
png|svg|jpg|gif
url-loader
woff|woff2|eot|ttf|otf|pdf
file-loader
等等  

 

实际上这些loader都是我们在编译时候是指负责文件转换器的工作,将这些我们在浏览器上运行不了的东西,编辑成html,js,css等,单纯的文件转换;

webpack 中的loaders和plugins的区别?
 1 {
 2    test: /\.vue$/,
 3    loader: ‘vue-loader‘,
 4    exclude: /node_modules/,
 5 }, 
 6 {
 7    test: /\.(ts|x)$/,
 8    exclude: /node_modules/,
 9    use: [{
10          loader: ‘babel-loader‘,
11          options: {
12             cacheDirectory: true,
13          },
14       },
15       {
16          loader: ‘ts-loader‘,
17          options: {
18             transpileOnly: true,
19             experimentalWatchApi: true,
20             appendTsSuffixTo: [/\.vue$/],
21          },
22       },
23    ],
24 },
View Code

2、plugins

在webpack运行的生命周期中会广播出许多事件,plugin可以监听这些事件,在合适的时机通过webpack提供的API改变输出结果。pugins是一个扩展器,webpack的强大生态给一些第三方插件有了用武之地,在webpack整个打包过程中,并不是管理上面loader负责处理文件的部分,而是处理我们一些实际的操作,例如生成html文件插入js文件、加载bundle文件、压缩js,css等文件等等操作;

 

总结一下区别:

对于loader,它是一个转换器,将A文件进行编译形成B文件,这里操作的是文件,比如将A.scss转换为A.css,单纯的文件转换过程,plugin是一个扩展器,它丰富了webpack本身,针对是loader结束后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听webpack打包过程中的某些节点,执行广泛的任务

webpack 中的loaders和plugins的区别?

上一篇:<网站仿真>利用备份数据对网站进行还原


下一篇:Maven报错:Downloading from central: https://repo.maven.apache.org/maven2/