Webpack：CSS代码分割（13）

介绍

对css代码进行压缩，css内容不会在放入html里。当一个入口引入多个css文件时，将会把文件合并。

打包使用

基础配置

安装：npm install --save-dev mini-css-extract-plugin

webpack.config.js基础配置，若css里有body不会合并，配置了多少个body css都会存在。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },};

压缩配置

webpack.config.js压缩配置，若有多个地方配置body css合并成一个body。

安装：npm install --save-dev optimize-css-assets-webpack-plugin

webpack.config.js配置

// 引入插件
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader'],
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css', // 直接引入的文件会使用此规则，例：main.js
            chunkFilename: '[id].[contenthash].css'// 间接引入的文件会使用此规格，例：mian.js里引入的文件
        })
    ],
    optimization: { //使用插件，只有打包为生产环境时才会压缩合并多个body的css
        minimizer: [new OptimizeCSSAssetsPlugin({})]
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    }
};

打包成一个文件

使用optimization.splitChunks.cacheGroups将css打包到一个文件里去

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },};Extr

基于入口打包

避免复制css的问题，我们可以根据entry入口进行打包。

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
function recursiveIssuer(m) {
    if (m.issuer) {
        return recursiveIssuer(m.issuer);
    } else if (m.name) {
        return m.name;
    } else {
        return false;
    }
}
module.exports = {
    entry: {
        foo: path.resolve(__dirname, 'src/foo'),
        bar: path.resolve(__dirname, 'src/bar'),
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                fooStyles: {
                    name: 'foo',
                    test: (m, c, entry = 'foo') =>
                        m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
                    chunks: 'all',
                    enforce: true,
                },
                barStyles: {
                    name: 'bar',
                    test: (m, c, entry = 'bar') =>
                        m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
                    chunks: 'all',
                    enforce: true,
                },
            },
        },
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
        ],
    },
};