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'  // 解决资源重复打包的问题
},
相关推荐
IT_陈寒14 分钟前
SpringBoot性能翻倍秘籍:从自动配置到JVM调优的7个实战技巧
前端·人工智能·后端
叮咚前端26 分钟前
vue3笔记
前端·javascript·笔记
薛定谔的算法42 分钟前
面试官问箭头函数和普通函数的区别?这才是面试官最想听到的
前端·javascript·面试
pepedd86443 分钟前
AI Coding 最佳实践-从零到一全栈项目编写
前端·aigc·trae
砂糖橘加盐44 分钟前
非 AI 时代前端是如何设计一个组件的
前端·javascript·vue.js
艾小码1 小时前
告别JavaScript类型转换的坑:从隐式陷阱到显式安全指南
前端·javascript
LEAFF1 小时前
性能优化工具Lighthouse操作指南
前端
Cache技术分享1 小时前
176. Java 注释 - 类型注释和可插入类型系统
前端·后端
粥里有勺糖1 小时前
视野修炼-技术周刊第125期 | nano-banana
前端·github·aigc
菠萝+冰1 小时前
手机上访问你电脑上的前端项目
前端·智能手机