1.在webpack中加载图片时，需要知道图片的大小。在加载图片之前，在src文件夹下创建img文件夹用来存放图片2.将图片导入img文件夹下之后，安装url-loader,命令为：npm install --save-dev url-loader，之后在webpack.config.js文件的rules中添加以下内容
3.其中limit代表图片的大小，单位为B，小于limit的图片与大于limit的图片会执行不同的操作来显示在页面上
1.在进行以上操作之后，对css文件进行修改，将该图片显示为背景图片
2.对项目进行打包，可以正常显示该图片
3.在显示图片时，webpack会将该图片编译为base64字符串进行调用
1.首先将该图片设置为背景图片
2.大于limit的图片，首先需要安装file-loader，命令为：npm install file-loader --save-dev3.安装成功之后，对项目进行打包后，发现会将该图片打包到dist文件夹中，并且使用哈希值命名，不方便我们使用，需要在打包时规定打包之后的图片的命名方式4.在weboack.config.js文件中的options的属性中添加name属性，格式为：img/[name].[hash:8].[ext]。代表打包后的图片存放在dist文件夹下的img文件夹中，并且名称为图片的名称.8位任意哈希值.后缀名
5. 当打包项目之后，无法在页面中显示该图片信息。在页面中无法获取到打包后图片的路径，在webpack.config.js文件的output属性中添加publicPath，代表打包所有的url地址时默认在开头添加publicPath的内容output: { // 出口文件的路径，使用绝对路径 path: path.resolve(__dirname, 'dist'), // 出口文件名称 filename: 'bundle.js', // 添加dist文件夹路径，当在项目中出现url地址时，会默认在最前面添加publicPath的内容 publicPath: 'dist/'}
6.打包项目，背景图片正常显示
