webpack background-image css 顯示不了

本文出自：

http://blog.csdn.net/wyk304443164

方法在最下面

webpack.config.js

old

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        dashboard: ['./js-src/main.js']
    },
    output: {path: __dirname + "/dist", filename: 'js/[name].[hash].js', publicPath: "/"},
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            use: [{loader: 'babel-loader'}],
        }, {
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'less-loader']
            }),
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader'}),
        }, {
            test: /\.(jpg|png|gif)$/,
            use: ['file-loader?name=images/[name].[ext]'],
        }, {
            test: /\.(eot|woff|woff2|ttf|svg)$/,
            use: ['file-loader?name=fonts/[name].[ext]'],
        }],
    },
    plugins: [
        new ExtractTextPlugin({filename: 'css/[id].[hash].css'}),
        new HtmlWebpackPlugin({
            chunks: ['dashboard'],
            filename: 'dashboard.html',
            template: path.join(__dirname, "/dashboard-tmpl.html")
        }),
        new CopyWebpackPlugin([{from: 'lib/*', to: './'}]),
    ],
    externals: { //全局引用
    },
    devtool: "#source-map"
};

new

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        dashboard: ['./js-src/main.js']
    },
    output: {path: __dirname + "/dist", filename: 'js/[name].[hash].js', publicPath: "./"},
    module: {
        loaders: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            use: [{loader: 'babel-loader'}],
        }, {
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'less-loader']
            }),
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader'}),
        }, {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
        }
            // , {
            //     test: /\.(jpg|png|gif)$/,
            //     use: ['file-loader?name=images/[name].[ext]'],
            // }
            , {
                test: /\.(eot|woff|woff2|ttf|svg)$/,
                use: ['file-loader?name=fonts/[name].[ext]'],
            }],
    },
    plugins: [
        new ExtractTextPlugin({filename: 'css/[id].[hash].css'}),
        new HtmlWebpackPlugin({
            chunks: ['dashboard'],
            filename: 'dashboard.html',
            template: path.join(__dirname, "/dashboard-tmpl.html")
        }),
        new CopyWebpackPlugin([{from: 'lib/*', to: './'}]),
    ],
    externals: { //全局引用
    },
    devtool: "#source-map"
};

教程開始：
添加加載器url-loader
1.

npm install url-loader --save-dev

2.
rules修改爲loaders

3.註釋掉修改爲：

// , {
//     test: /\.(jpg|png|gif)$/,
//     use: ['file-loader?name=images/[name].[ext]'],
// }

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

如何參數什麼的請自行搜索

http://www.cnblogs.com/ghost-xyx/p/5812902.html

4.webpack即可