Я хочу загрузить изображения с помощью веб-пакета в интерфейс (реагировать)
<Ч />
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist/'),
filename: `[name].bundle.js`,
// `chunkFilename` provides a template for naming code-split bundles (optional)
chunkFilename: `[name].bundle.js`
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
}),
new HtmlWebpackPlugin({template:'src/index.html'})
],
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader'],
include: path.join(__dirname, 'src')
},{
test: /\.(jpg|png|svg)$/,
use: {
loader: "url-loader",
options: {
limit: 25000,
},
},
},{
test: /(\.css)$/,
use: ['style-loader',
'css-loader']
}, {test: /\.(jpe?g|gif|svg)$/i, use: ["file-loader"]}
]
}
};
<ч />
index.html
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
<img src="resourses/css/images/headerImage.jpg"/>
<script src="vendor.bundle.js"></script>
<script src="main.bundle.js"></script>
<img src="resourses/css/images/headerImage.jpg"/>
</body>
</html>
<ч />
my package.json
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.11.1",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.22.1"
"file-loader": "^2.0.0",
"html-webpack-plugin": "^2.30.1",
"url-loader": "^0.5.7",
Это изображение того же html, но я удалил ссылку на таблицу стилей для этого вопроса.
Я установил файл-загрузчик в веб-пакете, но по-прежнему нет изображения в источнике, когда я вижу в браузере. Кроме того, я использовал тег img. Это также не дает мне никакого результата. Если вам потребуются дополнительные данные, я отредактирую сообщение, и любая помощь будет оценена.