webpack4.0的自定义loader实现
2021-04-16 本文已影响0人
焚心123
1、什么是loader？
- webpack是基于node的模块化打包工具，它本身也只能处理JS和JSON文件，没有处理CSS、图片等其他格式文件的能力。loader就相当于是一个翻译机，将这些文件翻译成webpack能处理的格式。换句话说，loader赋予了webpack处理其他文件的能力。
2、首先我们进行一个简单的loader的认识，一个loader文件只做一件事，默认是函数的形式，但是不能写成箭头函数的形式，必须要有返回值，返回值是string或者是buffer类型，一般我们不会将传递进来的参数做过多的操作，传进来是啥，就返回啥，因为不只是你自己用，其他人可能会在你写的loader基础上在写个loader文件进行处理
- 首先我们来写一个简单的loader，创建一个replace.js文件，在src/myLoader文件夹下
- src/myLoader/replace.js
//* loader-utils是专门用于自定义loader时的一些工具函数
const { getOptions } = require('loader-utils');
module.exports = function(socue){
console.log(socue);//* 当前的这个值就是index.js中的内容
const options = getOptions(this); //* getOptions用于获取配置，kfc.config.js中loader下的options中的参数
/**
* * 我们将index.js中的console.log('sadada')中的sadada进行替换为配置项中的参数name
*/
const con = socue.match(/console\.log\(['"](.*)['"]\)/);
return socue.replace(con[1],options.name);
}
- src/index.js
let a = '11111';
console.log('sadada');
-
kfc.config.js//这个是我配置的修改webpack配置的文件默认webpack.config.js
image.png
image.png
-
之后进行打包，看下方的效果图
image.png
-
上面的简单的replace写的loader，你学会了吗？
3、下面我们就自己简单的手写一个style-loader，css-loader，sass-loader，或者是less-loader
-
我们先说下，这几个loader在webpack中的顺序，loader中的顺序是自后往前执行的，先sass-loader|less-loader----->css-loader----->style-loader，先使用sass-loader将scss文件中的样式进行格式化，在css-loader中将样式序列化，就是转换为string类型，style-loader就是将样式添加到头部标签中的style标签中就算是大功告成了
-
src/myLoader/fxSassLoader.js|fxLessLoader.js（要先下载sass和less）
/**
* todo loader 必须有返回值，是string或者是buffer
* todo loader本质是一个函数，但是不能是一个箭头函数
* todo loader在webpack中给我们提供了很多的API，可以看看
* todo this.callBack()这个是loader中的API，
* todo sass--->css
*/
let sass = require('node-sass');
console.log(sass);
module.exports = function(socuse){
console.log(socuse);//todo 这就是当前的入口文件中的所有内容
const result = sass.renderSync({
data:socuse
});//这是sass文件中处理后返回给我们一个.css文件
return result.css;
}
//! 这是less-loader处理的
// const less = require("less");
// module.exports = function (source) {
// less.render(source, (e, output) => {//方法是less文件中自带的
// this.callback(e, output.css);//this.callBack是loader中的API，返回多个值
// });
// };
- src/myLoader/fxCssLoader.js
/**
* todo loader 必须有返回值，是string或者是buffer
* todo loader本质是一个函数，但是不能是一个箭头函数
* todo loader在webpack中给我们提供了很多的API，可以看看
* todo this.callBack()这个是loader中的API，
* todo 将css进行序列化，转为string
*/
module.exports = function(socuse){
console.log(socuse);//todo 这就是当前的入口文件中的所有内容
return JSON.stringify(socuse)
}
- src/myLoader/fxStyleLoader.js
module.exports = function(socuse){
return `
const ele = document.createElement("style");
ele.innerHTML = ${socuse};
document.head.appendChild(ele);
`
}
- src/index.js
import './index.scss';//这个文件，你要是使用less就引入index.less文件就好
let a = '11111';
console.log('sadada');
- src/index.less|index.scss（两个文件中的样式是一样的）
body{
#app{
width: 400px;
height: 400px;
background:orange;
display: flex;
flex-direction: column;
.head{
width: 40px;
height: 40px;
background: red;
}
}
}
- kfc.config.js文件中进行配置
image.png
image.png
- 此时运行npx webpack --config ./kfc.config.js指令进行打包（你要是使用的webpack.config.js文件可以直接运行npx webpack直接进行打包）
