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

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

0 голосов
/ 26 октября 2018

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

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

В настоящее время происходит следующее:

cd /MyProject/ && npm run build

Внутри этой папки есть'modules', каждый модуль представляет собой папку.

src:

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

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

/ MyProject / MyModule / src / index.html

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

dist:

MyProject / MyModule / dist / (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/'),
        }
    }
}

1 Ответ

0 голосов
/ 26 октября 2018

Я буду работать для лучшего RegExp, но я использовал следующее решение 

        {
            test: /\.(jpg|png|gif|svg)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        regExp: /([^\0]+)\/([^\0]+)\/([^\0]+)\/([^\0]+)\/([^\0]+)\.(jpg|png|gif|svg)$/,
                        name: '[2]/dist/img/[name].[ext]',
                        outputPath: '',
                        publicPath: '/',
                    }
                }
            ]
        }
...