Я создаю React w/Webpack setup и изо всех сил стараюсь делать то, что кажется, должно быть простой задачей. Я хочу, чтобы 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
}
};
Я столкнулся с подобной проблемой и обнаружил, что вы можете использовать url-loader
для разрешения операторов "url()"
в вашем CSS, как и любые другие требования или импорт.
Чтобы установить его:
npm install url-loader --save-dev
Он установит загрузчик, который может конвертировать разрешенные пути в виде строк BASE64.
В вашем файле конфигурации webpack используйте url-loader в загрузчиках
{
test: /\.(png|jpg)$/,
loader: 'url-loader'
}
Также убедитесь, что вы правильно указываете свой общедоступный путь и путь к изображениям, которые вы пытаетесь загрузить.