loader 是导出为一个函数的 node 模块。该函数在 loader 转换资源的时候调用。给定的函数将调用 loader API,并通过 this 上下文拜访。
Webpack 的配置离不来 loader
,官网也有对于如何编写一个 loader 的文档介绍,这篇文章会通过手写一些常见的loader
,加深对 loader 的意识,进步工作中的开发效率。
导出 loader
loader
是一个函数,承受匹配到的文件资源字符串和 SourceMap
,咱们能够通过批改文件内容的字符串返回给下个一loader
解决:
module.exports = function(source,map){return source;}
筹备工作
为了不便咱们编写 loader
,咱们先筹备好webpack
环境:
生成一份 package.json
:
npm init -y
装置webpack
:
npm install webpack webpack -D
创立 webpack.config.js
文件,并输出以下内容:
// webpack.config.js
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
package.json
退出 scripts
命令:
"scripts": {
"build": "webpack",
"dev": "webpack --watch"
},
配置别名
咱们晓得,webpack
默认会到 node_modules
外面找对应的 loader
,这样不不便咱们调试,咱们能够通过给webpack.config.js
增加 resolveLoader
属性,将 loader
指向咱们创立的 loaders
文件夹
...
resolveLoader: {
modules: [path.resolve(__dirname, "node_modules"),
path.resolve(__dirname, "./loaders"),
],
}
...
创立 loaders
文件夹,外面将寄存咱们本人编写的loader
:
mkdir loaders
另外通过 resolveLoader.alias
也能配置 loader
别名:
resolveLoader: {
alias: {loader1: resolve(__dirname, "./loaders/loader1.js"),
loader2: resolve(__dirname, "./loaders/loader2.js"),
loader3: resolve(__dirname, "./loaders/loader3.js"),
},
},
module:{
rules:[
{test:/\.(js)$/,
use:["loader1.js","loader2.js","loader3.js]
}
]
}
第一个 loader
先写一个简略的 loader
练练手,后面说到 loader
能够替换指标资源文件的内容,这里我要把我的项目外面的 console.log
都干掉,毕竟我的项目上线的时候控制台呈现调试内容不适合。
在 loaders
文件夹下新建cleanlog-loader.js
,输出上面内容:
module.exports = function(source){return source.replace(/console\.log\(.*\);?\n/g, '');
}
到 webpack.config.js
增加配置:
module:{
rules:[{test: /\.(js)$/,
use:"cleanlog-loader"
}]
}
src
文件夹下新建 index.js
写点 console
内容,而后控制台执行 npm run build
,能够发现编译后的文件dist/bundle.js
曾经没有 console
信息了。
banner-loader
banner-loader
能够在脚本文件增加正文信息,配置形式如下:
module:{
rules:[{test: /\.(js)$/,
use:{
loader:"banner-loader",
options:{text:"/**** build from chenwl ****/",}
}
}]
}
这里有两个中央须要思考:
- 获取配置信息
loader-utils
- 校验配置参数是否正确
schema-utils
在 loaders
文件夹下创立banner-loader.js
,输出上面内容:
const fs = require("fs");
const {resolve} = require("path");
const loaderUtils = require("loader-utils");
const {validate} = require("schema-utils");
module.exports = function (source) {
// 获取配置参数
let options= loaderUtils.getOptions(this);
let schema = {
type: "object",
properties: {text: {type: "string"}
}
}
// 校验参数是否正确
validate(schema, options,"banner-loader")
return `${options.text} ${source}`;
}
当然也能够通过读取文件内容写入,新增配置参数 filename
,对模板文件进行读取:
if(options.filename){
// 依赖某个文件变动,做到实时更新;this.addDependency(path.resolve(__dirname, `../${options.filename}`))
return fs.readFileSync(options.filename, "utf-8") + source;
}
利用 addDependency
,如果指标文件发生变化,能够在察看模式(watch mode) 下重编译,用 npm run dev
启动并批改filename
对应的文件试试
babel-loader
babel-loader
依赖 @babel-core
和@babel/preset-env
,通过 npm 先装置:
npm install @babel-core @babel/preset-env -D
webpack-config.js
增加 rules:
{test: /\.(js)$/,
use: [
{
loader: "babel-loader",
options: {presets: ["@babel/preset-env"],
},
},
]
}
能够通过 this.async
办法在 loader 中编写异步代码:
// babel-loader.js
const loaderUtils = require("loader-utils");
const babel = require("@babel/core");
module.exports = function(source){const options = loaderUtils.getOptions(this);
const cb = this.async(); // 异步函数
babel.transform(source,{
...options,
sourceMaps:true
},function(err,result){cb(err, result.code)
})
}
style-loader 和 less-loader
// less-loader
let less = require("less");
module.exports = function (source) {
let cssStr = "";
// 用 less 转成 css
less.render(source,function(error,result) {if(!error){cssStr = result.css}
});
return cssStr
}
// style-loader
module.exports = styleLoader(source) {
// js 字符串,生成 style 标签插入到模板文件中
let code = `
let styleEl = document.createElement("style");
styleEl.innerHTML = ${JSON.stringify(source)};
document.head.appendChild(styleEl);
`;
return code.replace(/\/n/,"");
}
file-loader
咱们晓得 webpack
是辨认不了 js 以外的其它文件的,所以 file-loader
须要设置loader.raw = true
,让 loader 晓得当初解决的是二进制的内容:
const loaderUtils = require("loader-utils");
function fileLoader(source) {
// interpolate 插值
let fileUrl = loaderUtils.interpolateName(this, "[hash].[ext]", {content: source,});
this.emitFile(fileUrl,source);
// 转换后的 Buffer 最终是要被插入到页面中,返回类型只能是 buffer 或 string
// fileUrl 记得加引号,不然会报错哦
return `module.exports = '${fileUrl}'`
}
// loader 解决的是二进制的内容
fileLoader.raw = true;
module.exports = fileLoader;
url-loader
url-loader
目标是将小图转成 base64 编码,否则就用 file-loader
解决:
// url-loader.js
const loaderUtils = require("loader-utils");
const mime = require("mime");
function urlLoader(source) {let {limit} = loaderUtils.getOptions(this);
if(limit > source.length){let code = `data:${mime.getType(this.resourcePath)};base64,${source.toString('base64')}`
return `module.exports = "${code}"`
}else{return require("./file-loader").call(this, source)
}
}
urlLoader.raw = true;
module.exports = urlLoader;