Webpack: поместите каждую точку входа в отдельный файл

Question

У меня есть проект nodejs. Я новичок в этом, поэтому я прошу немного терпения. Я хотел бы, чтобы мои файлы .scss были перенесены в .css и извлечены из [name].scss в [name].css.

Я настроил веб-пакет для поиска каждого * .scss файла с glob.sync(...), и эта часть работает. Я также настроил MiniCssExtractPlugin для извлечения вывода в файл .css.

Тем не менее, по какой-то причине я получаю только 1 выходной файл (строго говоря, 2, потому что я также получаю файл main.js), называемый main.css, со всеми полями .scss, объединенными в нем.

Я искал всевозможные учебные пособия, но я не совсем понимаю концепцию здесь, поэтому я спрашиваю и здесь. Моя конфигурация веб-пакета выглядит следующим образом:

const CopyPlugin = require('copy-webpack-plugin');
const glob = require('glob');

module.exports = {
    entry: glob.sync("./src/**/*.scss"),
    output: {
        path: __dirname + "/dist",
        publicPath: "/",
        filename: "[name].[chunkhash].js"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                loader: 'ts-loader'
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg|otf)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'fonts/'
                    }
                }]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]',
                            context: 'src'
                        },
                    },
                ],
            },
            {
                test: /\.(scss|css)$/,
                exclude: /node_modules/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                }, {
                    loader: 'css-loader',
                }, {
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () {
                            return [
                                require('autoprefixer')
                            ];
                        }
                    }
                }, {
                    loader: 'sass-loader' // compiles Sass to CSS
                }]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts']
    }
    mode: "production",
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
        })
    ]
};

Answer 1

Кажется, я нашел решение:

Как я уже сказал в своем комментарии: основная причина этой "ошибки", которая заключается в том, что если я добавлю в запись простой массив, он будет помещен вкарта, где ключ является основным.Имя выходного файла - это ключ этой карты, который, как вы уже догадались, является основным.Поэтому мне нужно найти функцию, извлекающую имя файла без расширения из пути.

Я написал эту функцию:

const getFilename = (path) => {
    const myRegexp = /(?:(?:[a-zA-Z]|[0-9])+)*(?:\/((?:[^\/])+)\..*)+$/g;
    let result = myRegexp.exec(path)[1];
    console.log("input: " + path + ", output: " + result);
    return result;
};

Она берет весь путь и возвращает имя файла безрасширение.Теперь некоторые из вас, гуру JS, могут в этом помешать, но я в основном не парень из JS.Я просто хочу установить и забыть метод для scss и минимальной компиляции машинописи в maven.

таким образом, часть entry: моей конфигурации стала следующей:

entry: () => {
    const files = glob.sync("{./src/**/*.ts,./src/**/*.scss}");

    return files.reduce((acc, val) => {
        let filename = getFilename(val);
        if(acc[filename] === undefined) {
            acc[filename] = [];
        }
        acc[filename].push(val);
        return acc;
    }, {});
},