一 准备工作

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

}