react umi 使用chainwebpack 改图片存放路径无法识别
版本
"umi": "^2.2.1",
"react": "^16.5.1",
chainWebpack版本v2
一般默认情况下使用 build打包后,图片会出现在dist下的static文件夹里,但是因为一些原因,我想把static文件夹改个名字,例如叫newStatic这样。
我在config.js使用了这样的写法
const assetDir = "newStatic";
chainWebpack:(config, { env, webpack, createCSSRule })=> {
// 修改图片输出目录
config.module
.rule("images")
.test(/.(png|jpe?g|gif|webp|ico)(?.*)?$/)
.use("url-loader")
.loader(require.resolve("url-loader"))
.tap((options) => {
const newOptions = {
...options,
name: assetDir + "/img/[name].[hash:8].[ext]",
fallback: {
...options && options.fallback,
options: {
name: assetDir + "/img/[name].[hash:8].[ext]",
esModule: false,
},
},
};
return newOptions;
});
// 修改svg输出目录
config.module
.rule("svg")
.test(/.(svg)(?.*)?$/)
.use("file-loader")
.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,
// }))
;
},
结果是:图片可以被打在正确的文件夹,但是当yarn start的时候,svg图片的base64格式 的地址出现错误
src="data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSAiL25ld1N0YXRpYy9pbWcvbG9nb+eZveiJsi40YjljOTg4MS5zdmciOw=="
base64解码出来的地址如下
src="module.exports = "/newStatic/img/logo白色.4b9c9881.svg";"
在上文代码中tap()和options()都试过了,效果一样不行,所以该怎么修改才能够在图片路径里去掉这个module.exports?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论