каково намерение извлечь все css в один файл

Во-первых, я не понимаю, в чем смысл извлечения всех css в один файл и какая от этого польза? Более того, я пытаюсь использовать splitChunks из webpack4 для извлечения css, но он создает файлы js. Я думаю, он не должен создавать файлы css? это мой код.

splitChunks: {
  cacheGroups:{
    vendors: {
      test: /\.js$/g,
      chunks: 'all',
      name: 'vendors',
      minChunks: 1,
      minSize: 1
    },
    styles: {
      test: /\.less$/g,
      chunks: 'all',
      name: 'styles',
      minChunks: 1,
      minSize: 1,
      enforce: true
    }
  }
}

в конце этого кода были получены файлы «vendors.js» и «styles.js». Как это получилось? Спасибо за вашу помощь;


webpack webpack-4
person gourdbaby    schedule 13.08.2018    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Когда у вас есть разные файлы css, браузеру необходимо сделать несколько запросов, чтобы получить все файлы. И каждый запрос занимал много времени, но представьте, что браузер делает всего один запрос.

А также, когда вы объединяете все css в один файл, обычно вы опускаете лишние пробелы в файле css, и в основном вы делаете файл довольно маленьким.

см. это

person jsDevia    schedule 13.08.2018
comment
Но почему веб-пакет сгенерировал файл js после упаковки, а не файлы css? - person gourdbaby; 14.08.2018
comment
webpack отвечает за сборку и минификацию css и js. вы должны настроить его. - person jsDevia; 14.08.2018
comment
Могу ли я настроить splitChunks для создания файла css? Как конфигурация то? - person gourdbaby; 14.08.2018

arrow_upward
0
arrow_downward

это моя конфигурация веб-пакета для одного из моих проектов, с этой конфигурацией вы сможете создавать файлы css и js.

И этого должно быть достаточно для любого проекта.

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: [
        'babel-regenerator-runtime',
        path.resolve(__dirname, 'src')
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production'),
                WEBPACK: true
            }
        }),
        new ExtractTextPlugin({
            filename: 'index.css',
            disable: false,
            allChunks: true
        }),
        new webpack.optimize.UglifyJsPlugin()
    ],
    resolve: {
        extensions: ['.js', '.json', '.jsx'],
    },
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                use: {
                    loader: 'babel-loader'
                },
                include: path.resolve(__dirname, 'src'),
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{
                        loader: 'css-loader',
                        options: {
                            minimize: true
                        }
                    }, {
                        loader: 'sass-loader',
                        options: {
                            minimize: true
                        }
                    }]
                })
            },
            { test: /\.(png|jpg|jpeg|gif|ico)$/, loader: 'url-loader' },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
            { test: /\.(woff|woff2)$/, loader: 'url-loader?prefix=font/&limit=5000' },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
        ]
    }
};
person jsDevia    schedule 14.08.2018
comment
Вы очень думаете, но это не конфиг webpack4. позвольте мне подумать. - person gourdbaby; 14.08.2018
comment
твое право. поэтому я должен изменить свою версию веб-пакета, позвольте мне вернуться к вам после изменения ее на версию 4. - person jsDevia; 14.08.2018

arrow_upward
0
arrow_downward

Хорошо упаковать несколько небольших файлов css вместе, это может уменьшить количество запросов...
Однако кажется ужасным использовать splitChunks>cacheGroups>styles, когда вы используете antd, похоже, что splitChunk нарушил динамический импорт antd css, и когда вы открываете свою страницу, он загружает все antd css, даже если вы не используете их на текущей странице.

person user2248202    schedule 15.05.2019