如何使用webpack高效加载各种静态文件资源？

本文共计602个文字，预计阅读时间需要3分钟。

前言：对于非静态文件，如js，当webpack打包时，会直接打包到模块文件中，如main.js。如果修改了，需要再次编译。而对于静态文件，如jpg，svg等，我们通常不希望webpack去打包，只需要在b'中引用即可。

前言:

对于非静态的文件，如js，当webpack打包时，会被直接打到模块文件中，如main.js，如果修改了，需要再次编译
而对于静态文件，如jpg，svg等，我们不希望webpack去打包，只需要在build完后，直接放到dist下的某个路径下即可，随时可以修改，并不需要再次编译

首先，看一段很熟悉的webpack配置

{ test: [/\.jpg/], loader: require.resolve('url-loader'), options: { limit: 10000, name: 'static/media/[name].[ext]', }, }

它表明，在解析jpg文件时，只需要提供一个url即可，bytes小于10000的转为base64。 此url为static/media/xxx.jpg。