Webpack5中 assets问题

300 阅读1分钟

最近在学webpack5时,发现了一个问题,代码如下

这是部分loader的代码 image.png

这是scss代码

image.png

在build后,神奇的事情出现了

image.png 左侧dist为build后的文件目录,其中多了一张图片,后来发现这张图片貌似是原引入的图片转为了二进制,而编译成的css文件也引入了这个图片,导致图片无法正常显示

这是因为webpack5中,webpack自身整合了部分url-loader和file-loader的文件功能,自有了一套Asset Modules

typedescriptions
asset/resource发送一个单独的文件并导出URL,替代file-loader
asset/inline导出一个资源的data URL,替代url-loader
asset/source导出资源的源代码,之前通过使用raw-loader实现
asset在导出一个data URL和发送一个单独的文件之间做选择,之前通过url-loader+limit属性实现
javascript/autoJS with all features (任意)
javascript/esmJS enforced to strict ESM (es)
javascript/dynamicJS enforced to non-ESM (非es)
webassembly/async作为异步模块的 WebAssembly
webassembly/sync作为同步模块的 WebAssembly

最终解决办法,目前还在研究,有其他进展还会加更

image.png

如有问题欢迎讨论!