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'));
  }
上一篇:【记录】 【Umi】通过配置 dynamicImport loadingComponent 实现加载效果


下一篇:[qiankun]Uncaught Error: application 'vue2' died in status LOADING_SOURCE_CODE: [qiankun]