一、loader
loader按照执行优先级分类:
- pre 前置loader
- normal 普通loader
- inline 内联loader
- post 后置loader
相同优先级从后往前执行。
前面使用的都是normal loader ,配置pre和post loader需要在webpack.config.js中进行:
relus:[
{
enforce:"pre"
test:/\.js$/,
loader:"loader1",
},
{
test:/\.js$/, //normal
loader:"loader1",
},
{
enforce:"post"
test:/\.js$/,
loader:"loader1",
},
]
内联loader需要在import时使用,例如用style-loader和css-loader处理 .css文件:
import Styles from "style-loader!css-loader?modules!./styles.css";
此时!表示loader的分隔符。
在所有loader前使用!、-!、!!分别表示跳过normal loader、pre+normal loader、 pre+normal+post loader。
1.什么是loader
实际上就是一个函数,接收一个字符串作为输入,里面做处理(例如将es6等高级语法进行转换),将生成的字符串返回。
2.四种定义方式
同步loader:
异步loader:
raw loader:
接收的content是buffer数据流,一般用来处理图片、字体图标等流数据。可以和同步异步loader组合使用:
pitch loader:
在loader里加一个.pitch,pitch的执行顺序是从前到后,loader的执行顺序是从后到前,先pitch后loader。如果某个pitch中有return语句,则返回执行上一个loader,此后的pitch和loader都不执行了。
3.实现几个loader吧~
1)去掉js文件中的consoel.log(xxx)
module.exports = function (content){
return content.replace(/console\.log\(.*\);?/,"")
}
2)给内容加上作者信息
const schema = require("./schema.js")
module.exports = function (content){
const options = this.getOptions(schema);//options必须满足于schema的要求
const banner = `
/*
* Author: ${options.author}
*/
`
return banner + content;
}
还需要写schema.json验证规则文件:
{
"type":"object",//options类型
"properties":{//options中的属性
"author":{
"type":"string",//属性类型
}
},
"additionalProperties":false;//是否接受额外属性
}
使用:
{
test:/\.js$/,
loader:"./loader/banner-loader",
options:{
author:"李四",
}
}
二、plugin
compiler只有一个,compliation有多个,对应不同plugin。两者有各自的钩子函数,可以利用这些钩子函数在某个时间点进行一些操作。