umi配置chainWebpack，使用自定义loader----jsx-px2rem

前言

虽然云谦大佬在github上说了，umi本身的配置已经很完善了，但是肯定满足不了所有人各种各样的奇葩需求。。。

比如今天说的将jsx中的style里，将px转换为rem。

 

umi本身提供了postcss、cssloader等，但是要想将jsx中的px转换成rem，并未找到相关的插件。就只有手写一个loader，然后再修改umi的webpack配置了。

 

loader：

jsx-px2rem-loader.js:

import regRules from './reg';
import _ from 'lodash';    // lodash是一个js工具库，特别方便建议各位去了解一下
 
module.exports = function(source) {
  if (this.cacheable) {
    this.cacheable();
  }
  let backUp = source;
 
  // style={{marginRight: '1px'}} => style={{marginRight: '0.01rem'}}
  if (regRules.pxReg.test(backUp)) {
    backUp = backUp.replace(regRules.pxReg, px => {
      let val = px.replace(regRules.numReg, num => {
        return num / 100;
      });
      val = val.replace(/px$/, 'rem');
      return val;
    });
  }
 
 
  // marginRight: 1 => marginRight: '0.01rem'
  _.each(regRules.styleReg, (reg, styleName) => {
    if (reg.test(backUp)) {
      backUp = backUp.replace(reg, val => {
        return val.replace(regRules.numReg, num => {
          return `"${num / 100}rem"`;
        });
      });
    }
  });
 
 
  // img标签 width: 1 => style={{width: '0.01rem'}}
  _.each(regRules.imgReg, (reg, styleName) => {
    if (reg.test(backUp)) {
      backUp = backUp.replace(reg, val => {
        let style = '';
        val.replace(regRules.numReg, num => {
          style = `${num / 100}rem`;
        });
        return `style={{${styleName}:"${style}"}}`;
      });
    }
  });
  
  return backUp;
}

 

reg.js:

// 匹配jsx中的px 如 1px
const pxReg = /\b(\d+(\.\d+)?)px\b/g;    
 
// 匹配jsx中 缩写形式的style 如：marginRight: 1
const styleReg = {    
  marginTop: /\bmarginTop(?:\s+):(?:\s+)?(\d+)/g,
  marginRight: /\bmarginRight(?:\s+)?:(?:\s+)?(\d+)/g,
  marginBottom: /\bmarginBottom(?:\s+)?:(?:\s+)?(\d+)/g,
  marginLeft: /\bmarginLeft(?:\s+)?:(?:\s+)?(\d+)/g,
  fontSize: /\bfontSize(?:\s+)?:(?:\s+)?(\d+)/g,
  paddingTop: /\bpaddingTop(?:\s+)?:(?:\s+)?(\d+)/g,
  paddingRight: /\bpaddingRight(?:\s+)?:(?:\s+)?(\d+)/g,
  paddingBottom: /\bpaddingBottom(?:\s+)?:(?:\s+)?(\d+)/g,
  paddingLeft: /\bpaddingLeft(?:\s+)?:(?:\s+)?(\d+)/g,
}
 
// 匹配img 中的行内样式 width: '20'
const imgReg = {    
  height: /\bheight(?:\s+)?=(?:\s+)?(\'||\")?(\d+)?=(\'||\")?/g,
  width: /\bwidth(?:\s+)?=(?:\s+)?(\'||\")?(\d+)?=(\'||\")?/g,
}
 
// 匹配数字
const numReg = /(\d+)/g;
 
export default {
  pxReg,
  styleReg,
  imgReg,
  numReg,
}

 

修改chainWebpack配置

之后便是修改umi的webpack配置。

这是官方的说明：

https://umijs.org/zh/config/#chainwebpack

 

很简洁的一句话，让人摸不着头脑。

 

而github上webpackChain的issue回复速度也是让人无语，文档也是不清不楚。

求助umi官方人员得到的回复却是参照webpackChain。

 

没有办法，只能一个一个去尝试。

终于，在快要放弃的时候成功了。

 

config.js

import path from 'path'
 
...
 
chainWebpack(config){
    config.module
      .rule('jsx-px2rem-loader')
      .test(/\.js$/)
        .exclude
        .add([path.resolve('../src/pages/.umi'), path.resolve('node_modules')])
        .end()
      .use('../loader/jsx-px2rem-loader')
        .loader(path.join(__dirname, '../loader/jsx-px2rem-loader'));
  }

注意：在配置config的时候，.use() 与 .loader()的路径事关重要！根据项目实际路径自行更换！

配置错误会出现诸如： /.umi not found或者未报错但是并未执行loader等等错误！

 

我的目录结构如下：

 

config.js（也就是修改chainWebpack的文件）存在与config目录下。