webpack使用自实现的打包文件+loader

  • webpack.config.js:

    const path = require("path");
    
    module.exports = {
        devtool: 'cheap-module-eval-source-map',
        mode: "development",
        entry: "./src/index.js",
        output: {
            filename: "./index.js",
            path: path.resolve(__dirname, "bundle")
        },
        module: {
            rules: [{
                test: /\.less$/,
                use: [{
                    loader: path.resolve(__dirname, 'loader/style-loader')
                }, {
                    loader: path.resolve(__dirname, 'loader/less-loader')
                }]
            }]
        }
    };
  • index.less:

    body {
        width: 100%;
        height: 100%;
    
        div {
            width: 200px;
            height: 200px;
            background: red;
        }
    }
  • index.js:require('./index.less');
  • 最终目录结构:

最终目录

  • 首先安装less:npm install less --save-dev
  • 将自实现的打包多个js文件的nhwpack放在node_modules目录下,进入nhwpack目录下使用npm link链接到全局
  • 修改Complier.js文件getSource方法:使其判断读取的文件是否是js文件,若是则直接返回,若不是则需要使用相对应的loader处理后返回

    // 读取文件,返回文件内容
    getSource(modulePath) {
        let content = fs.readFileSync(modulePath, "utf-8");
        let rules = this.config.module.rules;
        rules.forEach(function (rule) {
            // 通过解构赋值,获取正则和对应的loader
            let {
                test, // test是正则
                use // use是使用的loader
            } = rule;
            if (test.test(modulePath)) {
                // 如果不是js代码,就需要通过loader处理后返回;是则直接返回
                for (let i = use.length - 1; i >= 0; i--) {
                    //loader从下往上,从右至左执行
                    let loader = require(use[i]['loader']);
                    // 将content传给loader形参
                    content = loader(content);
                }
            }
        })
        return content;
    }
  • 最后需要修改less-loader.js文件:因为使用的是自己的webpack,无法使用let callback = this.async();

    const less = require("less");
    
    module.exports = function (source) {
        // render方法中的回调函数是异步操作
        // let callback = this.async();
        let code = ``;
        // render(需要转换的less代码,成功或失败执行的回调函数)
        less.render(source, function (err, obj) {
            // err错误信息,obj成功后的信息
            // callback(err, obj.css);
            code = obj.css;
        });
        return code;
    }

最后修改:2021 年 05 月 07 日 12 : 47 AM
如果觉得我的文章对你有用,请随意赞赏!