webpack打包后，css中的background:url(url)不能正常显示。

Question

[问题描述]
1、在html文件中使用img标签图片显示正常。
2、在html标签中，使用style="background:url()"，图片显示正常。
3、在css文件中，使用background:#f00，背景颜色显示正常。
4、在css文件中，使用background:url，打包成功，但是打开网页后，html元素正常，但css未正确加载，而且js也无法运行。
5、尝试使用file-loader url-loader均无效。
6、曾出现过图片文件名加了哈希，但是打包后css中的图片引用却还是没有加hash的。
[代码如下]

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const uglify = require('uglifyjs-webpack-plugin'); 
const glob = require('glob');
const webpack = require('webpack')


const proDir = 'jzjy-wechat-build'; 


let config = {
    entry: {},
    output: {
        filename: '[name].[chunkhash:8].js',
        path: path.resolve(__dirname, proDir + '/js')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader','resolve-url-loader']
        }, {
            test: /\.(jpg|png|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '../img/[name].[ext]'
                    }
                },
            ]
        } , {
            test: /\.html$/,
            loader: 'html-loader'
        }, {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['babel-preset-env']
                }
            }
        }]
    },
    plugins: [
        new CleanWebpackPlugin([proDir])
    ],
    devtool: 'inline-source-map',
    externals: {
    },
    optimization: {},
    resolve: {
        alias: {
            '@': path.resolve('src/js/common/common-dev')
        }
    },
    watch: true
};



let ens = getEntry('./src/js/**/*.js');
for (let i in ens) {
    config.entry[i] = ens[i]
}


function getEntry(globPath) {
    let files = glob.sync(globPath);
    let entries = {},
        entry, dirname, basename, pathname, extname;
    for (let i = 0; i < files.length; i++) {

        entry = files[i];
        dirname = path.dirname(entry); 
        extname = path.extname(entry);
        basename = path.basename(entry, extname);
        pathname = path.join(dirname, basename); 
        entries[basename] = entry;
    }
    return entries;
}




let css = getEntry('./src/css/**/*.css');
for (let i in css) {
    if (i in config.entry) {
        let _tmp = [];
        _tmp.push(config.entry[i]);
        _tmp.push(css[i]);
        config.entry[i] = _tmp
    } else {
        config.entry[i] = css[i]
    }
}



let htmls = getEntry('./src/htmls/**/*.html');
for (let i in htmls) {
    let conf = {
        filename: path.resolve(__dirname, proDir + '/' + htmls[i].replace('./src', '')),
        template: path.resolve(__dirname, htmls[i]),
        inject: 'true', //js插入的位置，true/'head'/'body'/false
        chunks: ['common1', i],
        hash: true,
    };
    if (i in config.entry) {
        conf.inject = 'true';
        conf.chunks = ['vendors', 'common1', i];
        conf.hash = true;
    }
    config.plugins.push(new HtmlWebpackPlugin(conf));
}


let files = getEntry('./src/files/*.*');
for (let i in files) {
    let conf = {
        from: path.join(__dirname, files[i]),
        to: path.join(__dirname, proDir + '/files/')
    };
    config.plugins.push(new CopyWebpackPlugin([conf]));
}


config.optimization = {
    splitChunks: {
        chunks: "all",
        minSize: 0,
        cacheGroups: {
            common1: {
                minChunks: 2,
                priority: -1,
                name: 'common1'
            }
        }
    },
    minimizer: [new uglify()]
}


module.exports = config;

目录结构如下：
project

|-node_modules
|-src 开发目录
    |-css
        |-common 公共css
    |-js
        |-common 公共js
    |-htmls
    |-img
    |-files
|-jzjy-wechat-build 打包目录
    |-img 打包后的img
    |-js 打包后的js
    |-htmls 打包后的html
    |-files 没什么用

整了半天实在是毫无头绪，求解答。

Answer 1

可能是版本问题，安装下低版本呢，例如2.2.x

Answer 2

我用html-loader之后，css中的背景图会被自动编译了，但是html中的背景图还是不行，静态的就写到css文件中去，如果碰到动态背景图，就写到js中，然后赋值全局变量，html取值

=====原回答=====

遇到同样的问题，并且我在html标签中使用，图片显示还不正常，更别说css中的背景图了