什么是理智的webpack 4(2018)在img标签中包含图像的方法

Question

在我的index.html的img标签中包含图像的理智 webpack 4 (2018( 方法是什么？

考虑到我的文件夹结构是这样的：

- dist
- src
- assets
- images
- myimage.png
- index.html
- index.js

在我的index.html我想使用<image src="assets/images/myimage.png" />

最后，我希望我的index.html成为dist文件夹的一部分。

更新：

我用这个webpack.config.js解决了它，但仍然存在一些问题：

const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
test: /.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
{
test: /.(png|svg|jpg|gif)$/,
use: {
loader: 'file-loader',
},
},
{
test: /.html$/,
loaders: 'file-loader?name=[name].[ext]!extract-loader!html-loader',
},
],
},
};

这样，我在dist文件夹中得到了一个index.html，<img src="assets/images/myimage.png" />被替换为<img src="2e06734dcef5b5db431246a4a4f626f5.png"/>。

我的src/index.js如下所示：

import './index.html'
import './style.scss'

一切都会好起来的，但是像loaders: 'file-loader?name=[name].[ext]!extract-loader!html-loader'一样链接加载器已被弃用。

所以剩下的问题是：如何在不使用已弃用的功能的情况下实现加载器链？

Answer 1

这个webpack.config.js为我解决了：

const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [{
test: /.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
{
test: /.(png|svg|jpg|gif)$/,
use: {
loader: 'file-loader',
},
},
{
test: /.html$/,
use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],
},
],
},
};