Question

首先，我不了解在单个文件中提取所有CSS的含义是什么，这样做有什么好处？此外，我尝试使用webpack4的splitChunks提取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”，这是怎么回事？谢谢您的帮助；

Answer 1

当您具有不同的CSS文件时，浏览器需要发出多个请求以获取所有文件。而且每个请求都花了很多时间，但想象一下浏览器只发出一个请求。

同样，当您将所有css捆绑到一个文件中时，通常您会忽略css文件中的多余空间，并且基本上可以使文件变小。

Please see this

Answer 2

这是我的一个项目的webpack配置，使用此配置，您应该能够生成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' }
        ]
    }
};

Answer 3

最好将多个小的css文件打包在一起，这样可以减少请求量...
但是，在使用splitChunks时使用cacheGroups> styles> antd似乎很糟糕，看起来splitChunk破坏了antd的动态导入css，并且当您打开页面时，即使您不在当前页面中使用它也会加载所有antd css

在单个文件中提取所有CSS的目的是什么

3 个答案: