Webpack系列——CSS代码的分离

CSS 也可以从主文件中分离出来，默认情况下CSS打包后会被添加在 html 的 style 标签中。

如果 CSS 代码有很多行，那么直接嵌入在 html 文件中是不合适的，我们希望它是以 <link>标签的形式去插入到 head 标签中，也就是外部引入 CSS 文件的形式。

首先安装插件：

npm install --save-dev mini-css-extract-plugin

注意： 它要配合 css-loader 使用, 之前使用的 style-loader 去掉，此项配置更常用用于开发环境，开发模式直接前面的正常配置即可。

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
​
module.exports = {
    ...
    plugins: [new MiniCssExtractPlugin()],
    module: {
        rules: [
            ...
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            }
            ...
        ]
    }
}

注意：除了引入和配置到插件处，还要记得把 'style-loader' 删除，添加为 MiniCssExtractPlugin.loader。

使用 optimize-css-assets-webpack-plugin 压缩 CSS 代码

const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.config.js');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
​
const prodConfig = {
  mode: 'production',
  devtool: 'cheap-module-source-map',
  optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})]
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
        sideEffects: true
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true
            }
          },
          'sass-loader',
          'postcss-loader'
        ],
        sideEffects: true
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
}
​
module.exports = merge(prodConfig, commonConfig);