Question

我有一个nodejs项目。我对此并不陌生，所以我要耐心一点。我希望将.scss文件转换为.css并将其从[name].scss提取到[name].css。

我已将Webpack配置为使用glob.sync(...)查找每个* .scss文件，并且该部分有效。我还配置了MiniCssExtractPlugin以将输出提取到.css文件中。

无论出于何种原因，我仍然只得到一个名为main.css的输出文件（严格来说是2，因为我也得到了main.js文件），所有的.scss文件都合并到了其中。 / p>

我寻找了各种教程，但是我对这里的概念并不是很了解，所以这也是我在这里问的原因。我的webpack配置如下：

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

我似乎找到了解决方法：

正如我在评论中说的：导致此“错误”的主要原因是，如果我向条目添加简单的数组，它将被放入映射中，键为main。输出文件名是此映射的关键字，您可能已经猜到它是main。因此，我需要找到一个提取文件名且没有扩展名的函数。

我写了这个函数：

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专家。我只想要一个在Maven中进行scss和最小化打字稿编译的设置并忘记方法。

这样，我的配置的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;
    }, {});
},

Webpack：将每个入口点放在其单独的文件中

1 个答案: