zoukankan      html  css  js  c++  java
  • 手写一个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 = /(d+(.d+)?)px/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/

  • 相关阅读:
    外挂方法.md
    第三章.md
    沙箱逃逸.md
    flex
    flash builder 关联svn
    flash 动画
    Flash移动开发的一本好书Android&IOS
    Foundation ActionScript 3.0.With Flash CS3 And Flex ..
    flash移动基础开发(PDF)
    O'Reilly.HTML5.Up.and.Running HTML5的一本好书
  • 原文地址:https://www.cnblogs.com/MainActivity/p/15507999.html
Copyright © 2011-2022 走看看