what is the intention of extract all css in a single file

问题

First, I don't understand what is the meaning for extract all css in a single file, and What's the profit of doing that? Moreover, I try use splitChunks of webpack4 to extract css but it is produced a js files. I think, it is not supposed to be produces a css files? this is my code.

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
    }
  }
}

ending this code produced a 'vendors.js' and 'styles.js', How come this? thanks for your help;

回答1:

When you have different css files, the browser needs to make multiple requests to get all files. And every request took a lot of time, but imagine browser makes just one request.

And also when you bundled all css to a single file , usually u omit the redundant spaces in css file and basically you make the file pretty small.

Please see this

回答2:

this is my webpack config for one of my projects, with this config, you should be able to generate css and js files.

And it should be enough for any project.

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' }
        ]
    }
};

回答3:

It's good to package multiple small css file together, it can reduce the request amount...
However, it seems terrible to use splitChunks>cacheGroups>styles when you are using antd, it looks like the splitChunk broke the dynamic import of the antd css, and when you open your page, it loads all antd css even you don't use in the current page

来源：https://stackoverflow.com/questions/51820966/what-is-the-intention-of-extract-all-css-in-a-single-file

标签

Webpack

webpack-4