Open syyuan14 opened 1 year ago
老版本用webpack4至少图片资源路径是正常的,新版本升级后用5就都不正常了
webpack 5 在资源模块有升级,可以看看官网的解决方法:https://webpack.docschina.org/guides/asset-modules#inlining-assets
同遇到,webpack4填入外部引入的图片会生成到项目文件夹内,webpack5打包后生成的路径在项目外部
看起里是webpack5的调整,可以手动把路径修正一下 https://github.com/webpack/webpack/issues/14392#issuecomment-1468814544
module: {
rule: {
fileLoader: {
test: /\.(png|jpg|gif|svg)$/i,
type: 'asset/resource',
generator: {
filename: (pathData) => {
const filenameArr = pathData.filename.split('/');
filenameArr.pop();
const path = filenameArr.join('/').replaceAll('..', '_');
return `${path}/[name]-[contenthash][ext]`;
},
},
},
},
}
或者当js模块解析
module: {
rule: {
fileLoader: {
test: /\.(png|jpg|gif|svg)$/i,
type: 'javascript/auto',
use: [
{
loader: 'file-loader',
options: {
name:'[path][name].[hash].[ext]',
esModule: false,
},
},
],
},
},
}
相关平台
飞书小程序
使用框架: React
复现步骤
我使用pnpm 搭建了一个monorepo项目目录结构如下: apps/myApp(小程序app) packages/common-components(使用ts代码写的公共组件)
;相反如果我不开启mini.compile.include 选项,common-components下的ts代码倒是可以正常编译
期望结果
图片打包路径正常、有treeshaking、配置mini.compile.include 后可以正常编译
实际结果
和期望结果相反
环境信息