手写一个webpack5 loader，功能：如果less头部有对应的转换注释，那么将less文件内的所有px转换为vw

1.创建一个 trans-vw-loader.js

 

// 如果是webpack3 需要使用 loaderUtils获取options
// 使用的loaderUtils版本： "loader-utils": "2.0.0",
// var loaderUtils = require('loader-utils');

var reg = /\b(\d+(\.\d+)?)px\b/g
var defaultOption = {
    layoutWidth: 750, // 默认设计稿宽度
    dpr: 2,
    decimal: 6, // 默认保留两位小数
    transformHeader: '//@@transformVw', // 标记需要转换的less注释头
}
module.exports = function (content, map, meta) {
    if (content.slice(0, transformHeader.length) === transformHeader) {
        // webpack3 需要将this.getOptions() 替换为 loaderUtils.getOptions(this);
        var option = Object.assign(defaultOption, this.getOptions() || {});
        var transformHeader = option.transformHeader;
        var layoutWidth = option.layoutWidth;
        var dpr = option.dpr;
        var decimal = option.decimal;
        var der = layoutWidth / dpr;
        content = content.replace(reg, function ($1, $2) {
            if ($1.indexOf('PX') !== -1) return $1;
            if ($2) return parseFloat((+$2 / der) * 100).toFixed(decimal) + 'vw'
            return $1;
        });
    }
    return content;
};

　　

 

　　

 

 

2.在webpack.config.js中引入此loader

 

// 顶部引入loader
const transVwLoader = path.resolve('./loaders/trans-vw-loader.js');
// 或者
// const transVwLoader = path.resolve(__dirname, './loaders/trans-vw-loader.js');


module: {
    rules: [
        {
            test: /\.less$/i,
            use: [
                stylesHandler,
                'css-loader',
                'postcss-loader',
                'less-loader',
                // 在这里添加自己写的loader
                {
                    loader: transVwLoader,
                    options: {
                        dpr: 2,
                        decimal: 4
                    }
                }],
        },
    ]
}

 

　　

 

 

 

附：webpack loader文档

https://webpack.docschina.org/api/loaders/