时间戳

首页 > 解决方案 > 将所有css提取到一个文件中的目的是什么

webpack - 将所有css提取到一个文件中的目的是什么

问题描述

首先，我不明白将所有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'，这是怎么回事？感谢您的帮助;

标签： webpackwebpack-4

解决方案

这是我的一个项目的 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' }
        ]
    }
};

推荐阅读