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]'
    },
    

求解?
非常感谢!

阅读 4.2k
2 个回答

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

你想达到的效果是什么呢?

打包后的代码要应对所有可能的情况呀,所以肯定要把所有的图片都打包上的呀

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题