webpack background-image css 显示不了

来源：互联网发布：数据库的逻辑设计编辑：程序博客网时间：2024/06/05 06:11

本文出自：

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

0 0