webpack撸个属于自己的loader

原创于 2020-03-13 10:36:27 发布 · 2.4k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了如何根据项目需求创建自定义的Webpack Loader，通过一个具体案例——html-addJs-loader，展示了如何为HTML文件动态添加JS链接。文章深入探讨了Loader的实现原理，包括源码分析、配置选项验证及文件流处理。

为啥要撸个loader

正所谓一时撸码一时爽，一直撸码一直爽！随着需求的多样化，有时候webpack现有的loader已经不能满足我们需求，我们需要更加定制化的loader！

loader撸之前的准备

webpack和loader的关系

loader是webpack的一部分，webpack的思想的一切皆模块，loader可以看作是webpack的一种模块！

webpack源码为loader定制好了规则，我们只需要按照现有的规则撸自己的loader就好了

webpack撸loader入手

具体可以看webpack文档，上面有详细的介绍，知难行易，有兴趣的童鞋可以去看看！

确定需求，这个是最重要的，一切基于需求入手，今天，我们撸个简单的loader，通过配置webpack中的loader，给html文件加入js链接，js文件可以有很多作用，比如今天要更新，那么这个js用于解决一些发布更新，暂停公告等需求

loader开撸

啥也不说了，直接上源码！
html-addJs-loader.js

const loaderUtils = require('loader-utils'); // 撸loader场用的工具
const validateOptions = require('schema-utils');// 撸loader场用的工具

const schema = {
  type: 'object',
  properties: {
    js: {
      type: 'string',
    },
  },
  required: [ 'js' ],
};

// source是webpack调用我们的loader，传进来的的文件流，因为我们这里匹配html文件，所以这里传进来的是所有符合条件的html文件解析后的字符串
module.exports = function (source) {
  const options = loaderUtils.getOptions(this); //获取的是我们loader的配置项
  validateOptions(schema, options, 'Loader options');//检验loader配置项是否符合要求

  let { js } = options;
  
  js = loaderUtils.stringifyRequest(this, js);//把loader要引入的js路径转化成相对路径，不同于fs.readFileSync

  const jsStr = `<script src=${js}></script>`;

  const _source = source.replace('{{__scirpt__}}', jsStr)
  return _source;
}

webpack.config.js

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
var HotModuleReplacementPlugin = require('webpack').HotModuleReplacementPlugin;

module.exports = {
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 9020,
        hot: true
    },
    entry: path.join(__dirname, './index.js'),
    output: {
        path: path.join(__dirname, "dist"),
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.html$/,
            use: [
                {
                    loader: 'html-loader'
                },
                {
                    loader: 'html-addJs-loader', // 我们的loader名字
                    options: {
                        js: path.resolve(__dirname, 'loaderJs/replaceJs/index.js'),
                    },
                }
            ]
        }]
    },
    resolveLoader: {
        modules: [path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, 'src/loaders')] //自定义loader路径引入
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
        }),
        new CopyWebpackPlugin([
            {
                from: 'loaderJs',
                to: path.resolve(__dirname, 'dist/loaderJs'),
            }
        ]),
        new HotModuleReplacementPlugin()
    ] // 如果js路径是文件下的路径，需要把js这个打包到dist相同目录下，如果js路径是cdn等外网链接，则不需要打包到dist同目录下
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 这里是 body 内容 -->
    <div>恭喜你成功了</div>
    {{__scirpt__}}
</body>
</html>

这里写自己的脚手架也有点偷懒了，直接 {{scirpt}}替代，html-addJs-loader也可以用js2 = fs.readFileSync(js)，然后用正则匹配到 </body>，再把js2用正则加入。但是这样也会引发一个问题，如果是多个html文件，所以我们需要在option配置项中指定html文件，同时修改html-addJs-loader，无疑增加了很多工作量，虽然通用性更强！这就相当于通用性和简单性权衡，仁者见仁啦！

当你页面上出现这个图的时候，恭喜你成功啦！
在这里插入图片描述