我正在制作一个使用React和Webpack的设置,但在完成看似简单的任务时遇到了困难。我希望Webpack能够包含图像,并像使用gulp那样将它们最小化,但我无法弄清楚。我只想能够像这样在我的CSS中链接一张图片:
/* ./src/img/background.jpg */
body { background: url('./img/background.jpg'); }
我将所有的css/js/img文件夹放在src文件夹中。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
}
};
require
函数来引入图片。例如,background-image: url('../assets/img/logo-dark.png')
。你需要尝试调整路径以确保正确引用。 - Alex Klibiszlimit
,如果图片大小超过限制,它会将其解析为 URL 而不是 Base64 字符串。 - SMSk