Webpack Plugin制作7-做一个自定义类型的loader

准备工作
简单分析
源代码
系列文章

现在我们来做一个loader。
我们自定义一个格式文件，其后缀是.b64。
我们把写好的js内容通过base64编码转换放到.b64中；
通过对.b64内容的base64解码，我们可以获取到js内容。
我希望在开发中能和.js一样import使用.b64资源，这就是loader要做的事情。

准备工作

本文的工程环境承接上文

这个简单的工程目录如下:

- build
- node_modules
- package.json
- plugins
    - 0.createLicense.js
    - 1.createFileList.js
    - 2.createLicense.js
    - 3.addRemark.js
    - 4.addRemark.js
    - 5.changeWebpackConfig.js
    - 5.hookPlugin.js
    - hooks.js
- loaders
- src
    - index.js
    - index.html
- LICENSE

简单分析

流程挺简单的，就具体讲一下应该怎么实现，怎么使用吧

loader实现

loader是一个模块，这个模块实现了一个功能函数，它把资源进行加工处理并返回。

const loaderFn = function(source){
  // 对资源进行一些处理
  // 在这个函数里面提供了this上下文，你可以通过它干一些更复杂的事情
  // ...
  return newSource
}

我们现在将base64功能转换进行实现。

// loaders/0.base64Loader.js
const base64Loader = function (source) {
    console.log(this.query)
    const jsData = Buffer.from(source,'base64').toString();
    return jsData
}
module.exports = base64Loader

webpack配置

module: {
    rules: [{
        test: /\.b64$/,
        use: [{
            loader: resolve('./loaders/0.base64Loader.js'),
            options: {
                param: '传递一个参数'
            }
        }],
    }]
},

理论上上面这样子就够了。这里说一些要注意的地方：

我们这里对路径做了resolve处理，实际上传进去的是一个绝对路径
当你使用相对路径时，你可以在resolveLoader中进行配置, 让webpack从node_modules之外的路径扫描loader。
你也可以在resolveLoader中配置为loader别名，然后直接使用即可，不必再传path了。

module: {
    rules: [{
        test: /\.b64$/,
        use: [{
            loader: resolve('./loaders/0.base64Loader.js'),
            // loader: 'base64-loader',
            options: {
                param: '传递一个参数'
            }
        }],
    }]
},
resolveLoader: {
    modules: ['node_modules', './loaders'],
    // alias: {
    //      "base64-loader": '0.base64Loader.js',
    // }
},

在代码中使用.b64资源

注意，下面我将在src目录添加.b64文件，并对index.js进行改动。

src目录如下：

- src
    - index.b64
    - index.js
    - index.html

index.b64内容如下:

Y29uc3QgZGVjcnlwdCA9IChkYXRhKSA9PiB7CiAgICByZXR1cm4gJ2RlY3J5cHQgc2VjcmV0OiAnICsgZGF0YTsKfQpleHBvcnQgZGVmYXVsdCBkZWNyeXB0Ow==

index.js内容如下:

import decrypt from './index.b64'
/*
index.b64 为以下内容的base64编码：
    const decrypt = (data) => {
        return 'decrypt secret: ' + data;
    }
    export default decrypt;
*/
function add(a, b) {
    return a + b
}

console.log(decrypt('hh data'));

源代码

https://github.com/nicennnnnnnlee/webpack-plugin-loader-examples