Исправлена ​​конфигурация webpack, чтобы не выводить неунифицированную версию файлов sass

Question

Мой веб-пакет выводит не минимизированные версии, которые включают в себя загрузку веб-пакета в дополнение к минимизированным версиям. Я хотел бы просто скомпилировать sass и вывести минимизированные версии:

const glob = require('glob');
var path = require('path');
const webpack = require("webpack");

const entryPlus = require('webpack-entry-plus');
const { VueLoaderPlugin } = require("vue-loader");


const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

let isProduction = false;

const entryFiles = [

    {
        entryFiles: glob.sync('./vue-spas/**/app.js'),
        outputName(item) {
            return item.replace('vue-spas/', 'spa/').replace('/app.js','.min.js');
        },
    },
    {
        entryFiles: glob.sync('./styles/portal/manifests/**/*.scss'),
        outputName(item) {
            return item.replace('styles/portal/manifests/', 'css/').replace('.scss', '');
        },
    },
    {
        entryFiles: glob.sync('./js/konstructs/**/*.js'),
        outputName: '/js/main.min.js'
    },
    {
        entryFiles: glob.sync('./js/components/**/*.js'),
        outputName(item){
            return item.replace('.js', '.min.js');
        }
    }

]


module.exports = function(env, argv){
    if (argv.mode === "production") {
        isProduction = true;
    }

    return {
        entry: entryPlus(entryFiles),
    
        output: {
            filename: '[name]',

            path: path.resolve(__dirname, 'dist')
        },
        externals: {
            vue: 'Vue'
        },
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    loader: "vue-loader",
                    options: {
                        preserveWhitespace: false,
                    }
                },
                {
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    // Apply rule for .sass, .scss or .css files
                    test: /\.(sa|sc|c)ss$/,
            
                    // Set loaders to transform files.
                    // Loaders are applying from right to left(!)
                    // The first loader will be applied after others
                    use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
                            
                    
                }
            ]
        },
        plugins: [

            new MiniCssExtractPlugin({
                filename: '[name].min.css'
            }),
            new VueLoaderPlugin(),
                new webpack.DefinePlugin({
                    "process.env": {
                        NODE_ENV: isProduction ? '"production"' : '""'
                    }
                })
        
        ],
        optimization: {
            minimizer: [
                new UglifyJSPlugin({
                    cache: true,
                    parallel: true
                  }),
                  // enable the css minification plugin
                  new OptimizeCSSAssetsPlugin({})
            ]
        }
    
    }
}

Вывод, который я получаю, идеален для всего, кроме моих файлов SASS:

/root
----/css
-------/themeone
-------/themeone.min.css
-------/themetwo
-------/themetwo.min.css

Попытка выяснить, где я ошибаюсь с дублированиемвывод сгенерированных файлов SASS, без необходимости в * .min.css.

Answer 1

Для тех, кто испытывает ту же проблему. По-видимому, это просто известная проблема для веб-пакета 4. Она устанавливается для веб-пакета 5

Ссылка

Поскольку веб-пакет 5 не выпущен во время меняЗадавая этот вопрос, я решил эту проблему с помощью плагина, который выполнял некоторую постобработку выходной папки и определяя конкретные типы файлов, которые необходимо удалить. Это, конечно, не самый элегантный способ сделать это, но он решает проблему, возникающую при запуске процесса webpack 4. по умолчанию.

Мое решение для файла webpack.config.js:

const glob = require('glob');
var path = require('path');
const webpack = require("webpack");

const entryPlus = require('webpack-entry-plus');
const { VueLoaderPlugin } = require("vue-loader");


const RemovePlugin = require('remove-files-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserJSPlugin = require("terser-webpack-plugin");


let isProduction = false;

const entryFiles = [

    ///..... Other Entry Files
    {//// SASS Themes
        entryFiles: glob.sync('./styles/portal/manifests/**/*.scss'),
        outputName(item) {
            console.log(item);
            return item.replace('styles/portal/manifests/', 'css/portal/').replace('.scss', '');
        },
    }
    /////.......... Other Entry Files

]


module.exports = function(env, argv){
    if (argv.mode === "production") {
        isProduction = true;
    }

    return {
        entry: entryPlus(entryFiles),
    
        output: {
            filename: '[name]',

            path: path.resolve(__dirname, 'dist')
        },
        externals: {
            vue: 'Vue'
        },
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    loader: "vue-loader",
                    options: {
                        preserveWhitespace: false,
                    }
                },
                {
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    // Apply rule for .sass, .scss or .css files
                    test: /\.(sa|sc|c)ss$/,
            
                    // Set loaders to transform files.
                    // Loaders are applying from right to left(!)
                    // The first loader will be applied after others
                    use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
                            
                    
                }
            ]
        },
        plugins: [

            new MiniCssExtractPlugin({
                filename: '[name].min.css'
            }),
            new RemovePlugin({
       
                after: {
                    test: [
                        {
                            folder: 'dist/css',
                            method: (filePath) => {
                                return !(new RegExp(/\.css$/, 'm').test(filePath));
                            },
                            recursive: true
                        }
                    ]
                }
            }),
            new VueLoaderPlugin(),
                new webpack.DefinePlugin({
                    "process.env": {
                        NODE_ENV: isProduction ? '"production"' : '""'
                    }
                })
        
        ],
        optimization: {
            minimizer: [new TerserJSPlugin({})],
          },
    
    }
}

Надеюсь, это поможет кому-то еще. Я попытаюсь обновить, когда выйдет webpack 5.