require - webpack 打包动态图片

问题描述

问 题

项目需求按用户选择显示不同图片组合，开发发现提交时webpack把整个文件夹的图片都打包进来了。
尝试过用require.ensure,虽然异步加载了，但还是打包了整个folder的图片。
js:

let selectedList = [];
selectedList.pusth(require(`../assets/images/select_${sTyle}.png`));

打包出来的文件：

../assets/images/^\.\/.*\.png$

../assets/images/select_1.png
../assets/images/select_2.png
../assets/images/select_3.png
../assets/images/select_4.png

webpack config loader

{
      test: /\.png$/,
      loader: 'url?limit=25000&mimetype=image/png&name=assets/[name].[hash].[ext]'
    },
    {
      test: /\.jpg$/,
      // loader: 'url?name=assets/[name].[hash].[ext]'
      loader: 'file?name=assets/[name].[hash].[ext]'
    },
    

求解？
非常感谢！

解决方案

如果图片没有经常编辑修改的话，建议这种情况下把所有图片放到一个静态目录下，在打包时直接把所有图片拷贝到目标路径，除非小图片非常多且又都用得上，否则不建议使用 url-loader 来加载。

这篇关于require - webpack 打包动态图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！