我正在做一个React w/Webpack设置,正在努力完成看似简单的任务.我希望网页包包含图片,并尽量减少它们,就像我gulp 一样,但我想不出来.我只想在css中链接一个图像,如下所示:
/* ./src/img/background.jpg */
body { background: url('./img/background.jpg'); }
我所有的css/js/img文件夹都在一个src文件夹中.Webpack输出到dist文件夹,但我不知道如何在那里获取图像.
以下是我的网页设置:
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
}
};