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'));
}
分类:
webpack
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析