项目需求按用户选择显示不同图片组合,开发发现提交时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 来加载。