Vue Loader预处理器的理解
官方介绍:
在webpack中,所有的预处理器需要匹配对应的loader。Vue Loader允许你使用其它webpack loader处理Vue组件的某一部分。它会根据lang
特性以及你webpack配置中的规则自动推断要使用的loader。
vue-loader是什么?
webpack的loader
用来打包、转译js或者css文件,简单的说就是把你写的代码转换成浏览器能识别的,还有一些打包、压缩的功能等
基于webpack的一个loader,解析和转换.vue
文件,提取其中的逻辑代码script
、样式代码style
、以及HTML模板template
,在分别把它们交给对应的Loader去处理,核心的作用就是提取。
配置方式
loader配置:
-
在 webpack.config.js文件中指定 loader
-
写在
module.rules
属性中
属性介绍:
-
rules
是一个数组的形式,因此我们可以配置很多个loader
-
每一个
loader
对应一个对象的形式,对象属性test
为匹配的规则,一般情况为正则表达式 -
属性
use
针对匹配到的文件类型,调用对应的loader
进项处理代码编写,如下形式:
module.exports = { module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } }, { loader: 'sass-loader' } ] } ] } };
特性
-
处理
css
模块use
配置三个loader分别处理css文件,最终变成js代码看loader配置的代码,可以知道,
顺序为相反顺序,执行顺序:
sass-loader
css-loader
- style-loader`
-
loader可以是同步的,也可以是异步的
-
loader运行在Node.js中,并且能够执行任何操作
-
除了常见的通过
package.json
的mian
来将一个npm模块导出为loader,还可以在moudle.rules
中使用loader
字段直接引用一个模块 -
插件(plugin)可以为loader带来更多的特性
-
loader能够产生额外的任意文件
常见的loader
-
js:babel-loader
-
css: css-loader + style-loader
-
sass: sass-loader
-
less: less-loader
-
文件:file-loader
-
处理CSS: postcss-loade
-
url:url-loader
和file-loader类似,但是当文件小于设定的limit时可以返回一个Data Url
-
压缩html:html-minify-loader
-
ES6转ES:bael-loader
-
参考文档链接:
https://vue-loader.vuejs.org/zh/guide/pre-processors.html
https://www.cnblogs.com/Sherlock09/p/11023593.html
https://vue3js.cn/interview/webpack/Loader.html#%E4%B8%89%E3%80%81%E5%B8%B8%E8%A7%81%E7%9A%84loader