我最初并没有正确理解问题的本质，我修改了问题，以更准确地阐述问题...
有这样一个webpack的组件:
'use strict';
const webpack = require('webpack');
const path = require('path');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const minimizerBlock = {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
warnings: false,
parse: {},
compress: {},
mangle: true,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_fnames: false,
},
}),
new OptimizeCSSAssetsPlugin({})
]
}
const config = {
entry: {
main: './frontend/src/index.js'
},
output: {
path: path.resolve(__dirname, './public'),
filename: 'main.js'
},
devServer: {
contentBase: path.join(__dirname, 'public'),
port: 8888,
overlay: true,
proxy: {
'/api': 'http://localhost:8889'
}
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
},
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
},
{
test: /\.sass$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
},
//{ test: /\.(ttf|eot|woff|woff2|png|jpg|jpeg|svg|gif|webp)$/, loader: 'url-loader', },
{
test: /\.(png|jpg|jpeg|svg|gif|webp)$/,
include: [
path.resolve(__dirname, './frontend/binary/image/')
],
use: [{
loader: 'file-loader',
options: {
name: 'image/[name].[ext]',
}
}]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
include: [
path.resolve(__dirname, './frontend/binary/fonts/')
],
use: [{
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
}
}]
},
{
test: /\.(mp3)$/,
include: [
path.resolve(__dirname, './frontend/binary/audio/')
],
use: [{
loader: 'file-loader',
options: {
name: 'audio/[name].[ext]',
}
}]
},
{
test: /\.(html)$/,
include: [
path.resolve(__dirname, './frontend/pages/')
],
use: [{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
}
}]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: './index.css',
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'frontend/src/', 'template.html'),
filename: 'index.html',
favicon: 'frontend/binary/image/icons/iconfinder_tech_0001_4023871.png',
}),
]
};
module.exports = (env, options) => {
let production = options.mode == 'production';
config.devtool = production ? false : 'inline-cheap-module-source-map';
config.optimization = production ? minimizerBlock : {};
return config;
}
有一个“src”文件夹-“template.html”文件，其中包含布局的这一部分。
该布局如下：
<div id="root">
<img src="${require(`../binary/image/icons/iconfinder_tech_0001_4023871.png`)}" alt="" />
</div>
在编译后，webpack将其转化为位于公共文件夹中的index.html文件，我得到了以下结果
<div id="root">
<img src="images/iconfinder_tech_0001_4023871.png" alt="" />
</div>
它能够工作。
与此同时，src 下有一个文件夹 pages 包含不同的页面，在这些页面中有相同的排版。
<header>
<img src="${require(`../../../../binary/image/sheelak/0viber-image.jpg`)}" alt=""/>
</header>
运行webpack后，会创建一个包含以下文件的文件夹，这是结果：
<header>
<img src="${require(`../../../../binary/image/sheelak/0viber-image.jpg`)}" alt=""/>
</header>
然后是关于在header中使用img时require不起作用的问题。
会出现错误。
告诉我我的webpack有什么问题？