Webpack5 解决静态资源重复打包问题

Webpack5 解决静态资源重复打包问题

在使用url-loader、file-loader时,想将资源打包到特定的文件夹,而不是根目录时,Webpack还是会重复将资源打包到根目录。

解决

js 复制代码
{
   test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
   use: [
         {
          loader: 'url-loader',
          options: {
           limit: 8192, // 小于8KB的图片会被转为base64格式
           name: 'images/[name].[ext]', // 输出文件的路径和名称
          publicPath: 'dist/' // 公共路径,加载时会添加此路径
        }
      }
   ],
   type: 'javascript/auto'  // 解决资源重复打包的问题
},
{
  test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: [
       	  {
           loader: 'file-loader',
           options: {
            name: 'fonts/[name].[ext]',
            publicPath: 'dist/'
           }
      }
   ],
   type: 'javascript/auto'  // 解决资源重复打包的问题
},
相关推荐
yngsqq5 分钟前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk7 分钟前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan9 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE13 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年15 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能25 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房25 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
摆烂为不摆烂30 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7730 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
伟笑1 小时前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js