这个问题困扰好几个月了，没解决，就因为这个问题没解决，webpack放弃学下去了。

现在问题是： webpack在页面中用img标签引入图片，打包后图片路径 还是没变，原样输出了（<img src="./src/common/img/test.jpg" alt=""> 因为打包后不存在src目录 ，所以出错）

我把代码打包上传，你们下载后 先npm install ,安装依赖，然后启动用 npm start , 打包用 npm run dev,

index.html:

<p>我是直接在页面中用img标签加入的图片</p>

<img src="./src/common/img/test.jpg" alt="">

<div class="box" id='root'></div>

webpack.config.js 如下：

const path = require('path');

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const cleanWebpackPlugin = require('clean-webpack-plugin')

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

module.exports = {

    entry: './src/app.js',

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: "static/js/main.js",

        //所有资源的基础路径，而且一定要以 / 结尾

        publicPath: ""

    },

    plugins: [

        new HtmlWebpackPlugin({

            template: './src/index.html',

            filename: 'index.html'

        }),

        new cleanWebpackPlugin(['dist']),

        new ExtractTextPlugin({

            filename: 'static/css/[name]-[hash:4].css'

        }),

        new UglifyJSPlugin() //js压缩

    ],

    module: {

        rules: [{

                test: /\.js$/,

                use: [{

                    loader: 'babel-loader'

                }],

                exclude: [path.resolve(__dirname, 'node_modules')]

            },

            /*{

            test: /\.css$/,

            use: ['style-loader','css-loader']

            },*/

            {

                test: /\.css$/,

                use: ExtractTextPlugin.extract({

                    fallback: 'style-loader',

                    use: [{

                        loader: 'css-loader',

                        options: {

                            minimize: false //css压缩

                        }

                    }]

                })

            },

            {

                test: /\.(jpg|png|gif|jpeg)$/,

                use: [{

                    loader: 'url-loader',

                    options: {

                        //大于10KB的图片将被生成base64

                        //loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于10000字节的图片正常打包，小于10000字节的图片以 base64 的方式引用。

                        limit: 10000,

                        name: 'static/img/[name]_[hash:8].[ext]'

                    }

                }]

            },

            {

                test: /\.(ttf|eot|woff|woff2|svg)$/,

                use: ['file-loader']

            }

            /*{

                test: /\.(html)$/,

                use: [{

                    loader: 'html-loader',

                    options: {

                        attrs: ['img:src', 'img:data-src']

                    }

                }]

            }*/

        ]

    },

    devServer: {

        open: true,

        port: 8080,

        publicPath: '/'

    }

};

麻烦你们把代码 下载下来，把项目跑起来，看下问题吧， 我照着视频写的，却不行，我知道 解析页面中的图片，加这个配置：

            {

                test: /\.(html)$/,

                use: [{

                    loader: 'html-loader',

                    options: {

                        attrs: ['img:src', 'img:data-src']

                    }

                }]

            }

但是我一加上去，就报错，如下：

我暂且 把这段配置注释掉了，我QQ是 595979939，如果有描述不清楚的，请加我Q找我， 跪求 大神们帮忙解决下，非常感谢！！！???