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即可