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

雨落Liy

于 2024-05-23 09:06:50 发布

阅读量383

点赞数 2

分类专栏：前端构建文章标签：前端 webpack

本文链接：https://blog.csdn.net/weixin_42390185/article/details/139134978

版权

前端构建专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

解决

{
   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'  // 解决资源重复打包的问题
},