umi 框架 如何配置 自定義 插件 和 loader

一 准備工作

umi 為 react 的一個封裝比較nice的腳手架。優點當然就是 安裝方便，開箱即用，集成了諸多好用功能，詳見 官網。 當然 缺點就是 無法暴露原始的webpack.config.json 文件，只能按照官方文檔上特定的方法進行修改，而文檔卻並不完善。項目順利進行大家笑嘻嘻，一旦遇到偏難怪需求，要改變webpack配置了，大家哭唧唧。 從此踏上踩坑之路，騷年。 （ps：自己還是喜歡用 create-react-app構建，感覺自己從基礎開始配置的東西更有安全感）

// 新建一個 .umirc.pro.ts (生產環境為pro，開發環境為dev) ，用於 修改 umi 的webpakc配置
// 修改 package.json  script 中的build 配置
“script”：{
      “start”:...,
      "build":"cross-env cross-env UMI_ENV=pro umi build",   // 需要安裝cross-env ，
}

二 umi框架 配置 自定義插件

不多解釋，直接上代碼

// .umirc.pro.ts 文件
 // 引入自定義插件
const Plugin1 = require('./plugins/plugin1.js');
module .exports = {
      // 通過 chainWebpack配置 
    chainWebpack(config:any, { webpack } : {webpack:any}) {
        config.plugin('Plugin1')
            .use(Plugin1)
    }
};

umi框架 配置 自定義loader

const diyLoader = require('');
const path =  require('path');
...
chainWebpack(config){
    config.module
      .rule('diy-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'));
  }