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'  // 解决资源重复打包的问题
},
相关推荐
养鱼的程序员5 分钟前
零基础搭建个人网站:从 Astro 框架到 GitHub 自动部署完全指南
前端·后端·github
罗行9 分钟前
手写防抖和节流
前端·javascript
前端老鹰9 分钟前
CSS :is () 与 :where ():简化复杂选择器的 “语法糖”
前端·css·html
颜酱13 分钟前
理解并尝试vue3源码的reactivity
前端·javascript·vue.js
拉不动的猪21 分钟前
jS篇Async await实现同步效果的原理
前端·javascript·面试
杨充26 分钟前
03.接口vs抽象类比较
前端·后端
chxii38 分钟前
2.4 组件通信
前端·javascript·vue.js
泡岩浆的child1 小时前
朋友:你平常都用什么软件取色?我:QQ截图啊。朋友:牛X!
前端
志如1 小时前
【校招面试官说】什么样的技术人更容易被大厂校招选中?
前端·后端·面试
古夕1 小时前
TS 导出 PDF:解决表头乱码,实现表格内添加可点击链接
前端·typescript