如果你在CSS中引用了图片，那么：
这里两张照片 1张a 一张b a是大于8KB b 是小于8KB的：
直接打包会报错 我们需要 图片处理，我们使用url-loader来处理，依然先安装url-loader：
npm install --save-dev url-loader
安装即可 版本自己加 或 不加
添加配置：
module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: ‘url-loader‘, options: { limit: 8192 } } ] } ] } }
其中 test 中后可以配置多个后缀名，用|分隔即可，limit是限制大小（单位是 b）limit默认大小为8KB，引用的图片大小 小于 这个limit的话 会通过base64显示出来的，超出的话则 要打包不了，这时候我们应该安装file-loader 进行解析，当然 limit 是可控的，其次test也是你自己?：
const path = require(‘path‘) //请先执行 npm init 先安装NODE一些相关东西 module.exports = { //入口: 可以是字符串、数组、对象，这里我们入口只有一个，所以写一个字符串即可 entry:‘./src/main.js‘, //出口，通常是一个对象,path是路径（绝对路径），filename是导出的文件名 output:{ path:path.resolve(__dirname,‘dist‘), filename:‘bundle.js‘ }, module: { rules: [ //CSS 和 style Loader { test: /\.css$/i, use: ["style-loader", "css-loader"], }, //less 和 less-loader { test: /\.less$/i, loader: [ // compiles Less to CSS ‘style-loader‘, ‘css-loader‘, ‘less-loader‘, ], }, //url-Loader { test: /\.(png|jpg|gif)$/, use: [ { loader: ‘url-loader‘, options: { limit: 8192 //这就用默认大小8KB吧 } }, ], }, }
然后打包运行即可，，
如果图片大于你设置的limit 那么就安装 file-loader ， 命令： npm install file-loader --save-dev
其次添加 配置：
module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: ‘file-loader‘, }, ], }, ], }, };
过程不说了 直接干 可以发现dist打包文件加多了一个图片 那个图片是用32位hash值命名的，目的是防止名字重复。
其次 我们还得在 webpack.config.js 中的 output哪里 加上publicPath:"dist/" 那样路劲才能找对。
所以，我们可以在options中添加上如下选项：
? img：文件要打包到的文件夹
? name：获取图片原来的名字，放在该位置
? hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位
? ext：使用图片原来的扩展名
? 但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确
? 默认情况下，webpack会将生成的路径直接返回给使用者
? 但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下
再添加一个dist/
这里就不实现了 学个逻辑即可。