loader使用

Posted 2023-05-17

参考技术A 因为在开发中不仅需要处理js文件，还需要处理css、less、scss、图片，或者将typescript、ES6转成ES5等，仅仅有webpack是不够的，不支持这些转化，这个时候就需要使用loader。

针对处理不同的文件需要安装不同的loader，详见 https://www.webpackjs.com/loaders/

比如处理样式相关的loader，则需要使用css-loader，首先需要安装：

npm install css-loader --save-dev（如果需要指定安装版本的话就npm install css-loader@版本号 --save-dev，具体安装什么版本，看个人需求，版本号详见 https://www.npmjs.com/ ），

此时在终端对程序进行打包，发现报错，原因是仅安装css-loader不够，还需要安装style-loader。

安装 style-loader ，npm install style-loader--save-dev，然后配置webpack.config.js

此时需要注意：在配置时，主要css-loader和style-loader的顺序，得先写style-loader，然后在css-loader，原因是loader是链式调用，style-loader 负责将样式添加到DOM中，css-loader 负责将css文件加载。

如果使用less时，需要安装 npm install less-loader   less  --save -dev，同理也需要在webpack.config.js中配置。

⑥如果加载图片文件时，需要安装npm install url-loader  --save -dev

(如果加载的图片大于limit，则还需要安装npm install file-loader   --save -dev) 

webpack原理篇（六十）：使用 loader-runner 高效进行 loader 的调试

说明

玩转 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`;
;