最近在学webpack5时,发现了一个问题,代码如下
这是部分loader的代码
这是scss代码
在build后,神奇的事情出现了
左侧dist为build后的文件目录,其中多了一张图片,后来发现这张图片貌似是原引入的图片转为了二进制,而编译成的css文件也引入了这个图片,导致图片无法正常显示
这是因为webpack5中,webpack自身整合了部分url-loader和file-loader的文件功能,自有了一套Asset Modules
| type | descriptions |
|---|---|
| asset/resource | 发送一个单独的文件并导出URL,替代file-loader |
| asset/inline | 导出一个资源的data URL,替代url-loader |
| asset/source | 导出资源的源代码,之前通过使用raw-loader实现 |
| asset | 在导出一个data URL和发送一个单独的文件之间做选择,之前通过url-loader+limit属性实现 |
| javascript/auto | JS with all features (任意) |
| javascript/esm | JS enforced to strict ESM (es) |
| javascript/dynamic | JS enforced to non-ESM (非es) |
| webassembly/async | 作为异步模块的 WebAssembly |
| webassembly/sync | 作为同步模块的 WebAssembly |
最终解决办法,目前还在研究,有其他进展还会加更