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文档