说明
玩转 webpack 学习笔记
loader-runner 介绍
定义：loader-runner 允许你在不安装 webpack 的情况下运行 loaders
作用：
- 作为 webpack 的依赖，webpack 中使用它执行 loader
- 进行 loader 的开发和调试
loader-runner 的使用
https://github.com/webpack/loader-runner#readme
import { runLoaders } from "loader-runner"; runLoaders({ resource: "/abs/path/to/file.txt?query", // String: 资源的绝对路径（可选地包括查询字符串） loaders: ["/abs/path/to/loader.js?query"], // String[]: 加载器的绝对路径（可选地包括查询字符串） // {loader, options}[]: 带有选项对象的加载程序的绝对路径 context: { minimize: true }, // 用作基本上下文的附加加载程序上下文 processResource: (loaderContext, resourcePath, callback) => { ... }, // 可选：处理资源的函数 // 必须有签名 function(context, path, function(err, buffer)) // 默认使用 readResource 并且资源被添加一个 fileDependency readResource: fs.readFile.bind(fs) // 可选：读取资源的函数 // 仅在未提供 'processResource' 时使用 // 必须有签名 function(path, function(err, buffer)) // 默认使用 fs.readFile }, function(err, result) { // err: Error? // result.result: Buffer | String // The result // only available when no error occured // result.resourceBuffer: Buffer // The raw resource as Buffer (useful for SourceMaps) // only available when no error occured // result.cacheable: Bool // Is the result cacheable or do it require reexecution? // result.fileDependencies: String[] // An array of paths (existing files) on which the result depends on // result.missingDependencies: String[] // An array of paths (not existing files) on which the result depends on // result.contextDependencies: String[] // An array of paths (directories) on which the result depends on })
开发一个 raw-loader
将文件转换为string
src/raw-loader.js:
module.exports = function(source) { const json = JSON.stringify(source) .replace(/\u2028/g, '\\u2028' ) // 为了安全起见, ES6模板字符串的问题 .replace(/\u2029/g, '\\u2029'); return `export default ${json}`; };
使用 loader-runner 调试 loader
run-loader.js:
const fs = require("fs"); const path = require("path"); const { runLoaders } = require("loader-runner"); runLoaders( { resource: "./demo.txt", loaders: [path.resolve(__dirname, "./loaders/rawloader")], readResource: fs.readFile.bind(fs), }, (err, result) => (err ? console.error(err) : console.log(result)) );
运行查看结果：
node run-loader.js
实战
1、初始化项目并且安装依赖
npm init -y npm i loader-runner -S
2、添加文本跟 raw-loader.js
3、编写 run-loader.js
const fs = require("fs"); const path = require("path"); const { runLoaders } = require("loader-runner"); runLoaders( { resource: "./src/kaimo.txt", loaders: [ path.resolve(__dirname, "./src/raw-loader.js") ], context: { minimize: true }, readResource: fs.readFile.bind(fs), }, (err, result) => { err ? console.error(err) : console.log(result) } );
4、执行
执行 node run-loader.js
如果我们要替换文本里的 666，改成 313。
module.exports = function(source) { const json = JSON.stringify(source) .replace('666', '313') .replace(/\u2028/g, '\\u2028' ) // 为了安全起见, ES6模板字符串的问题 .replace(/\u2029/g, '\\u2029'); return `export default ${json}`; };
