webpack-url-loader 解决项目中图片打包路径问题

.test{
  color: red;
  width: 150px;
  height: 100px;
  overflow: hidden;
  background: url("../img/box@2x.png") no-repeat;
  background-size: 150px auto;
}
.img-base64{
  color: red;
  width: 150px;
  height: 100px;
  overflow: hidden;
  background: url("../img/media1.png") no-repeat;
  background-size: 100px auto;
}
#img-e {
  width:100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack-img</title>
</head>
<body>
1.css背景图 图片格式
<div class="test"></div>
2.css背景图 转化为base64
<div class="img-base64"></div>
3.html里引入图片
<div><img src="img/media4.png" alt=""></div>
4.js里引入图片
</body>
</html>

require('../css/test.css');
var imgSrc = require('../img/do.gif');

var img = new Image();
img.id = 'img-e';
img.src = imgSrc;
document.body.appendChild(img);

{
    test:/\.(jpg|png|gif|bmp|jpeg)$/,
    loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
   }

const webpack = require("webpack")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const extractTextPlugin = require("extract-text-webpack-plugin")

const path = require('path')
const extractCSS = new extractTextPlugin("css/[name].[hash:6].css")//
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件
module.exports = {
 //注意这里是exports不是
 entry: './src/js/main.js',
 output: {
  publicPath:"./",
  path: path.resolve(__dirname + "/dist"),
  //打包后的js文件存放的地方
  filename: "js/[name].[hash:6].js" //打包后的js文件名
 },
 plugins: [
  extractCSS,
  new OptimizeCssAssetsPlugin(),//压缩css
  new webpack.optimize.UglifyJsPlugin(),//new uglify(),//压缩js
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template:'src/index.html'
  })
 ],
 module: {
  rules: [ //1.0的是loaders
   //处理js中的loader
   {
    test: /\.js$/,
    loader: 'babel-loader',
    include: path.resolve(__dirname, '/src'),
    //指定打包的文件
    exclude: path.resolve(__dirname, '/node_modules') //排除打包的文件，加速打包时间
   },
   //处理css中的loader
   {
    test: /\.css$/,
    use: extractTextPlugin.extract({
     fallback: "style-loader",
     publicPath: "../",
     use: [
      {
       loader: 'css-loader',
       options:{
        minimize: true //css压缩
       }
      }
     ]
    })
   },
   //处理html模板中的loader
   {
    test: /\.html$/,
    loader: 'html-loader'
   },
   //处理ejs模板中的loader,以.tpl后缀结尾的
   {
    test: /\.tpl$/,
    loader: 'ejs-loader'
   },
   //处理图片中的loader,file-loader,url-loader,image-webpack-loader相互配合(图片格式转换base64 图片压缩)
   {
    test:/\.(jpg|png|gif|bmp|jpeg)$/,
    loader: 'url-loader?limit=8192&name=img/[hash:8].[name].[ext]'
   }
   ]
 }
};