файл-загрузчик сохраняет изображения в папке, например, Project / Module / src / img / example.jpg в Project / Module / dist / img / example.jpg

Привет Я пытаюсь создать конфигурацию Webpack, которая генерирует файлы для каждой папки в этом проекте. Создание webpack.config для каждой папки не является вариантом.

У меня есть обработчик index.html, JS и SASS. Следующий шаг - это изображения, с которыми я борюсь.

---

Что происходит в настоящее время:

cd/MyProject/&& npm run build

Внутри этой папки есть "модули", каждый модуль - это папка.

---

ЦСИ:

/MyProject/MyModule/src/js/app.js

/MyProject/MyModule/src/scss/app.scss

/MyProject/MyModule/src/index.html

/MyProject/MyModule/src/img/example1.jpg

Фокусное расстояние:

MyProject/MyModule/расстояние/(app.css | app.js | index.html | IMG/example1.jpg)

---

Моя проблема

При сохранении изображений, таким образом,

name: '[path]../../dist/img/[name].[ext]'

Мой вывод HTML следующий: <img src="/MyModule/src/img/../dist/img/screenshot.png" alt="Screenshot">

Я понимаю, почему это происходит, но я не знаю ни одного лучшего способа.

Если я удалю [path] он, конечно, сохранит внутри MyProject вместо MyModule, чего я не хочу.

webpack.config.js

const entryPlus = require('webpack-entry-plus');
const glob = require('glob');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const fs = require('fs');

const htmlList_exclusions = [
    'node_modules'
]

const htmlList = []
const imgList = []

const files = fs.readdirSync(__dirname)

files.forEach(file => {
    var filePath = path.join(__dirname, file);
    var isDir = fs.statSync(filePath).isDirectory();
    if(isDir && !file.startsWith('.') && !file.startsWith('_') && !htmlList_exclusions.includes(file)) {
        htmlList.push(filePath + '/src/index.html')

    }
});

const entryFiles = [
    {
        entryFiles: glob.sync('./*/src/js/app.js'),
        outputName(item) {
            return item.replace('src/js/', 'dist/').replace('.js', '').replace('./', '');
        },
    },
];


const plugins = [
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        // path: '[folder]tes',
        filename: '[name].css',
    })
]

for(var i in htmlList) {
    plugins.push( new HtmlWebpackPlugin({ 
        template: htmlList[i],
        filename: htmlList[i].replace('src/', '/'),
    }));
}

module.exports = {
    watch: true,
    entry: entryPlus(entryFiles),
    output: {
        path: path.resolve(__dirname, './'),
        filename: '[name].js',
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // you can specify a publicPath here
                            // by default it use publicPath in webpackOptions.output
                            // publicPath: '../',
                            sourceMap: false,
                        }
                    },
                    "css-loader", "sass-loader"
                ]
            },
            {
              test: /\.js$/,
              exclude: /(node_modules)/,
              use: {
                loader: 'babel-loader',
                options: {
                  presets: ['@babel/preset-env'],
                  plugins: ['@babel/plugin-proposal-object-rest-spread', '@babel/plugin-transform-runtime']
                }
              }
            },
            {
                test: /\.html$/,
                use: ['html-loader'],
            },
            {
                test: /\.(jpg|png|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path]../dist/img/[name].[ext]',
                            outputPath: '',
                            publicPath: '/',
                        }
                    }
                ]
            }
        ]
    },
    plugins,
    resolve: {
        alias: {
            globalscss: path.resolve(__dirname, './_global/scss/'),
        }
    }
}