Проблемы слияния css в один пакет - PullRequest
0 голосов
/ 04 марта 2020

Прямо сейчас у меня есть настройки vue .config. js, чтобы файлы JS были разбиты на несколько более мелких кусков. То же самое происходит для CSS. Однако я не хочу, чтобы CSS был разбит, а скорее был объединен в один CSS файл. Я не могу заставить конфигурацию работать.

Все блоки CSS находятся в каталоге dist / resources / static / css

const config = {
assetsDir: 'resources/static',
productionSourceMap: false,
devServer: {
    disableHostCheck: true,
    https: isDevelop && !httpsConfig ? httpsConfig : false,
    proxy: {
        '/api': {
            target: 'http://localhost:8080',
            secure: false,
        },
    },
    port: process.env.APP_PORT,
},
configureWebpack: {
    devtool: isDevelop ? 'eval-source-map' : '',
    entry: ['@babel/polyfill', './src/main.js'],
    optimization: {
        splitChunks: {
            minSize: 10000,
            maxSize: 200000,
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
                // Merge all the CSS into one file
                styles: {
                    name: 'styles',
                    test: /\.s?css$/,
                    chunks: 'all',
                    minChunks: 1,
                    reuseExistingChunk: true,
                    enforce: true,
                },
            },
        },
        minimizer: [
            new TerserPlugin({
                sourceMap: isDevelop,
                cache: './cache/terser',
                parallel: true,
                terserOptions: {
                    compress: {
                        collapse_vars : false,
                    },
                },
            }),
        ],
    },
    plugins: [
        new HTMLWebpackPlugin({
            inject: true,
            chunksSortMode: 'dependency',
            filename: 'index.html',
            template: './public/index.html',
            SOCKET_RECONNECTION_LIMIT: process.env.SOCKET_RECONNECTION_LIMIT,
            SOCKET_CONNECTION_THRESHOLD: process.env.SOCKET_CONNECTION_THRESHOLD,
        }),
    ],
    output: {
        filename: '[name].[hash].js',
    },
},
css: {
    extract: {
        filename: path.join('resources', 'static', 'css', '[name].[hash].css'),
    },
},

}

...