webpack file-loader 解析 css 文件中 background-image路径问题。

webpack file-loader 解析 css 文件中 background-image路径问题。

通过 webpack 的 file-loader 把 css 中的 background-image 图片提取出来构建到输出目录（例如dist或者build目录），发现图片被生成在了产出目录的根目录。

webpack.config.js文件配置

var webpack = require('webpack');
var vue = require('vue-loader');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'),
    ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    //devtool: 'eval-source-map',
    entry: "./js/app.js",
    output: {
        path: './__build__',
        filename: 'js/shared.js',
    },
    resolve: {
        alias: {
            'src': path.resolve(__dirname, './resources'),
            'vue': 'vue/dist/vue.min'
        }
    },
    resolveLoader: {
        root: path.join(__dirname, 'node_modules'),
    },
    module: {
        loaders: [{
            test: /\.vue$/,
            loader: 'vue'
        }, {
            test: /\.js$/,
            exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
            loader: ['babel-loader'],
            query: {
                presets: ['es2015']
            }
        }, 
        {test: /\.json$/,loader: "json"},
        {test: /\.css$/, loader: "style!css" },
        {test: /\.less$/,loader: 'style!css!less'},
        {test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=4192&name=[path][name].[ext]' },//limit参数，代表如果小于大约4k则会自动帮你压缩base64编码的图片
        /*{
            test: /\.(png|jpe?g|gif|ico)(\?\S*)?$/,
            loader: 'file-loader',
            query: {
                name: 'img/[name].[ext]'
            }
        },*/
        {test: /\.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
        {test: /\.svg$/, loader: "file" }]
    },
    vue: {
        loaders: {
            css: ExtractTextPlugin.extract('css-loader?sourceMap'),
            sass: ExtractTextPlugin.extract('css-loader?sourceMap!sass-loader?sourceMap')
        }
    },
    babel: {
        presets: ['es2015', 'stage-3'],
        plugins: ['transform-runtime']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new ExtractTextPlugin('[name]-[hash:3].css')
    ]
};

以下两种方法都可使用

==url-loader配置（1）==

loaders: [
   {test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=4192&name=[path][name].[ext]' },
] 

limit参数，代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录

==url-loader配置（2）==

test: /\.(png|jpe?g|gif|ico)(\?\S*)?$/,
    loader: 'file-loader',
    query: {
        name: 'img/[name].[ext]'
}

直接将图片拷贝到生产目录

接下来就可以正常使用了！