手寫一個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/