记录UMI框架下文件预览的问题 1.要想文件预览需要用到file-loader配置 方法:在config文件夹下的config.js文件中添加代码 //UMI框架下使用的webpack配置chainWebpack(config) { config.module .rule() .test(/\.(pdf|svg|docx|doc)$/)//正则校验文件后缀名.use('file-loader?name=[path][name].[ext]') ...
}, 当然,要使用npm 安装 file-loader模块。 重新编译项目,成功加载了glb模型。
npm i file-loader -D .umirc.ts export default defineConfig({ chainWebpack(config){ config.module .rule('otf') .test(/.otf$/) .use('file-loader') .loader('file-loader'); }, )} 项目引用 @font-face { font-family: 'DINBlack'; src: url('./assets/font/DIN-Black.otf') format(...
使用chainWebpack配置对带有标识的静态资源使用loader npm下载file-loader url-loader file-loader提供将静态资源作为模块引入的能力,url-loader比file-loader更强大,但是依赖于file-loader npm i --save-dev file-loader url-loader umirc文件配置webpack chainWebpack(config){config.module.rule('images')// 匹配...
file-loader提供将静态资源作为模块引入的能力,url-loader比file-loader更强大,但是依赖于file-loader npm i --save-dev file-loader url-loader umirc文件配置webpack chainWebpack(config) { config.module.rule('images')// 匹配文件后缀.test(/\.(png|jpe?g|gif|svg)$/) ...
修改配置文件umi.rc,添加对mp4文件的处理 exportdefaultdefineConfig({chainWebpack:(config)=>{config.module.rule('mp4').test(/\.(mp4|zip)(\?.*)?$/).use('file-loader').loader(require.resolve('file-loader')).options({name:'static/[name].[hash:8].[ext]',esModule:false,});},})...
chainWebpack(config){constimgRule=config.module.rule('images');constsvgRule=config.module.rule('svg');imgRule.uses.clear();svgRule.uses.clear();imgRule.test(/\.(png|jpe?g|gif|webp|ico|svg)(\?.*)?$/).use('file-loader').loader('file-loader').options({name:'imgs/[name].[hash...
loader(require.resolve("file-loader")) .options({ name: assetDir + "/img/[name].[hash:8].[ext]", esModule: false, publicPath:'/' }); // .tap((options) => ({ // ...options, // name: assetDir + "/img/[name].[hash:8].[ext]", // esModule: false, // limit:1000000...
"file-loader": "^6.2.0", "husky": "^8.0.1", "lint-staged": "^13.0.3", "prettier": "^2.7.1", "prettier-plugin-organize-imports": "^2", "prettier-plugin-packagejson": "^2", "style-loader": "^3.3.1", "typescript": "^4.1.2", ...
Umi 用户通常不需要关心 Umi 背后的实现,但如果你想知道,Umi 的路由是基于 react-router@6.3 实现(注:不是最新的 6.4,6.4 包含的 loader 和 action 功能并不是 Umi 所需要的)。 我们通过命令即可创建路由。 $ npx umi g page products Write: src/pages/products.tsx Write: src/pages/products.less 然后...