Webpack打包图片资源

最新推荐文章于 2024-07-21 15:11:42 发布

原创最新推荐文章于 2024-07-21 15:11:42 发布 · 436 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html5 #vue.js

收录于

前端同时被 3 个专栏收录

8 篇文章

订阅专栏

javaee

8 篇文章

订阅专栏

Web前端

4 篇文章

订阅专栏

在Webpack5中遇到图片资源打包路径错误的问题，可以通过设置asset模块的类型为'javascript/auto'来解决。当使用旧版assetsloader与asset模块同时存在时，可能导致资源重复。参考官方文档可了解详细步骤。

Webpack打包图片资源路径不对,打包两次.

当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 type: 'javascript/auto' 来解决。如下:

webpack.config.js

module.exports = {
  module: {
   rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            }
          },
        ],
+       type: 'javascript/auto'
      },
   ]
  },
}

参考官方文档 https://webpack.docschina.org/guides/asset-modules/