Webpack не выводит модуль Webpack для CSS - PullRequest
Новая
       32

Webpack не выводит модуль Webpack для CSS

0 голосов
/ 22 октября 2019

Когда я запускаю webpack, мои точки входа SASS пропускаются через динамические точки входа из шара. Выходные данные веб-пакета (через MiniCSSExtractPlugin) генерируют требуемые минимизированные версии CSS для каждой точки входа SASS, а также генерируют файлы модуля веб-пакета для SASS. Есть ли способ не выводить CSS-файлы модуля Webpack?

Мой 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 MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require("terser-webpack-plugin");

let isProduction = false;

const entryFiles = [

    {////Single Page Applications
        entryFiles: glob.sync('./vue-spas/**/app.js'),
        outputName(item) {
            return item.replace('vue-spas/', 'spa/').replace('/app.js','.min.js');
        },
    },
    {//// SASS Themes
        entryFiles: glob.sync('./styles/portal/manifests/**/*.scss'),
        outputName(item) {
            return item.replace('styles/portal/manifests/', 'css/').replace('.scss', '');
        },
    },
    {//// Konstruct Bundle
        entryFiles: glob.sync('./js/konstructs/**/*.js'),
        outputName: '/js/global.min.js'
    },
    {//// JS/ES6 Components
        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 TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
          },
    
    }
}

Это выводит: 

/dist
---/css
-------/themeone(Webpack Module version)
-------/themeone.min.css
-------/themetwo(Webpack Module version)
-------/themetwo.min.css
...