Catalog

Make complaints:

loader:

Modify the chain Webpack configuration

End

Make complaints:

At first, following the trend, the boss saw umi as a framework for Chinese people to develop labels, felt that it could be tried, and believed in Ali. From then on, the road of filling pits began.

 

Although Yunqian said in github that the configuration of umi itself has been perfected, it certainly can not meet all kinds of fantastic needs of everyone...

For example, in today's version of style in jsx, px is converted to rem.

 

UMI itself provides postcss, cssloader, etc., but to convert px in jsx into rem, no plug-ins have been found. Just write a loader by hand and then modify umi's web pack configuration.

 

loader:

 

jsx-px2rem-loader.js:

import regRules from './reg';
import _ from 'lodash';    // lodash is a js tool library, which is especially convenient for you to learn about

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"`;
        });
      });
    }
  });


  // The img tag 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:

// Matching PX in jsx, such as 1px
const pxReg = /\b(\d+(\.\d+)?)px\b/g;    
 
// A style that matches abbreviations in jsx, such as: 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,
}

// Match the in-line style width in img:'20'
const imgReg = {    
  height: /\bheight(?:\s+)?=(?:\s+)?(\'||\")?(\d+)?=(\'||\")?/g,
  width: /\bwidth(?:\s+)?=(?:\s+)?(\'||\")?(\d+)?=(\'||\")?/g,
}

// Matched digits
const numReg = /(\d+)/g;

export default {
  pxReg,
  styleReg,
  imgReg,
  numReg,
}

Modify the chain Webpack configuration

The next step is to modify umi's web pack configuration.

This is the official statement:

A very concise sentence, let a person feel confused.

 

The issue response speed of webpackChain on github is also silent, and the documents are unclear.

The response to the umi official was to refer to webpackChain.

 

There is no way but to try one by one.

Finally, I succeeded when I was about to give up.

 

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'));
  }

Note: When config is configured, the path of. use() and. loader() is important! Change according to the actual project path!

Configuration errors can result in errors such as: /.umi not found ing or not reporting errors but not performing loader, etc.

 

My catalogue structure is as follows:

Cong. JS (that is, files that modify chain Webpack) exists in the config directory.

 

End