# loader 开发

# loader-runner

loader-runner 允许在不安装 webpack 的情况下运行 loaders

  • 作为 webpack 的依赖, webpack 中使用它执行 loader
  • 进行 loader 的开发和调试
const { runLoaders } = require('loader-runner')
const fs = require('fs')
const path = require('path')

runLoaders({
    resource: path.join(__dirname, './src/demo.txt'),
    loaders: [
        path.join(__dirname, './src/test-loader.js')
    ],
    context: {
        minimize: true
    },
    readResource: fs.readFile.bind(fs)
}, (err, res) => {
    err ? console.log(err) : console.log(res)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# loader 参数获取

通过 loader-utils 的 getOptions 方法获取

const loaderUtils = require('loader-utils')
module.exports = content => {
    const { name } = loaderUtils.getOptions(this)
}
1
2
3
4

# loader 异步处理

通过 this.async 来返回一个异步函数

  • 第一个参数是 Error,第二个参数是处理的结果
module.exports = function(input) {
    const callback = this.async()
    // no callback => return 
    callback(null, input)
}
1
2
3
4
5

# loader 使用缓存

webpack 中默认开启 loader 缓存

  • 可以使用 this.cacheable(false) 关掉缓存

缓存条件:loader 的结果在相同的输入下有确定的输出

  • 有依赖的 loader 无法使用缓存

# loader 文件输出

通过 this.emitFile 进行文件写入

# 开发自动合成雪碧图 loader

  • 如何将两张图片合成一张图片
const Spritesmith = require('spritesmith')
const sprites = ['./image/1.png', './image/2.png']
Spritesmith.run({ src: sprites }, function handleResult(err, result) {
    result,image;
    result.coordinates;
    result.properties;
})
1
2
3
4
5
6
7

# 简单的写入文件内容 loader

具体源码 (opens new window)

更新于: 2/12/2020, 8:50:45 AM