Webpack中静态文件加载步骤是怎样的？

本文共计607个文字，预计阅读时间需要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。