Я изначально не правильно понял суть проблемы, поправляю вопрос, чтобы точнее сформулировать проблему ...
Есть такая сборка 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 folder - template.html, в котором есть такая частьмакет
<div id="root">
<img src="${require(`../binary/image/icons/iconfinder_tech_0001_4023871.png`)}" alt="" />
</div>
, который после компиляции webpack
перевоплощается в папку index.html in the public, я получаю этот результат
<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>
И тогда проблема require для img, которая в header неработа
получение ошибки.
Скажите, что не так с моим веб-пакетом?
Ссылкак проекту