webpack file-loader 解析 css 文件中 background-image路径问题。
通过 webpack 的 file-loader 把 css 中的 background-image 图片提取出来构建到输出目录（例如dist或者build目录），发现图片被生成在了产出目录的根目录。
webpack.config.js文件配置
代码语言：javascript复制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）==
代码语言：javascript复制loaders: [
{test: /.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=4192&name=[path][name].[ext]' },
] limit参数，代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录
==url-loader配置（2）==
代码语言：javascript复制test: /.(png|jpe?g|gif|ico)(?S*)?$/,
loader: 'file-loader',
query: {
name: 'img/[name].[ext]'
}直接将图片拷贝到生产目录
接下来就可以正常使用了！
