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

目录

吐槽：

loader：

修改chainWebpack配置

完结

---

吐槽：

最初追随潮流，老大看到了umi这个国人开发标签的框架，觉得可以尝试，并且相信阿里。从此开始了填坑之路。。。

 

虽然云谦大佬在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, p