我正在制作一个带有Webpack设置的React，我正在努力做一些似乎应该是一个简单的任务。我希望webpack包含图像，并尽量减少它们，就像我吞咽一样，但我无法弄明白。我只是希望能够像我这样在我的CSS中链接图像：
/* ./src/img/background.jpg */
body { background: url('./img/background.jpg'); }
我在src文件夹中包含了所有的css / js / img文件夹。 Webpack输出到dist文件夹，但我无法弄清楚如何在那里获取图像。
这是我的webpack设置：
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'cheap-eval-source-map',entry: [
'webpack-dev-server/client?http://localhost:8080','webpack/hot/dev-server','./src/index.js'
],output: {
path: path.join(__dirname,'dist'),// publicPath: './dist',filename: 'bundle.js'
},plugins: [
new webpack.HotModuleReplacementPlugin(),new HtmlWebpackPlugin({
template: './src/index.html'
})
],module: {
loaders: [{
exclude: /node_modules/,test: /\.js?$/,loader: 'babel'
},{
test: /\.scss$/,loader: 'style!css!sass'
},{
test: /\.(png|jpg)$/,loader: 'file-loader'
}]
},devServer: {
historyApiFallback: true,contentBase: './dist',hot: true
}
};
解决方法
我遇到了类似的问题，发现你可以使用
url-loader来解析CSS中的“url()”语句，就像其他任何require或import语句一样。
要安装它：
npm install url-loader –save-dev
它将安装可以将已解析路径转换为BASE64字符串的加载器。
在您的webpack配置文件中，在加载器中使用url-loader
{
test: /\.(png|jpg)$/,loader: 'url-loader'
}
还要确保正确指定公共路径以及要加载的图像路径。
