css 抽离

简介

在正常的打包过后，我们的css样式会自动插入 style 标签，如下：

但这通常不是我们需要的，我们需要将css单独打包成一个文件，通过 link 标签引入。并且可以为每个包含 css 的 js 文件创建一个 css文件，这时候我们就需要用到 mini-css-extract-plugin 插件了

配置

安装

首先要安装 mini-css-extract-plugin 插件。

yarn add mini-css-extract-plugin --dev

配置

配置 webpack.config.js

/** ./webpack.config.js **/
let path = require('path');
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin')

let htmlPlugins = ['index'].map(chunkName => {
  return new HtmlWebpackPlugin({
    filename: `${chunkName}.html`,
    inject:'body',
    chunks:[chunkName]
  })
});

module.exports = {
  mode: 'development',
  devServer: {
    port: 3000,
    open: true,
    compress: true,
    static: './dist'
  },
  entry:{
    index:'./src/index.js'
  },
  output: {
    filename:'[name].[contenthash:8].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use:[
          MiniCssExtractPlugin.loader, 
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }, 
          'postcss-loader', 
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    ...htmlPlugins,
    new MiniCssExtractPlugin({
      //filename:'main.css'
    })
  ]
}

• 需要把 style-loader 替换为 MiniCssExtractPlugin.loader。
• 在 plugins 中引用 new MiniCssExtractPlugin()。

最后就是 yarn build，结果如下：

我们看到这时 css 已经通过 link 引入了，在打包文件中也生成了 index.css。
上面我们配置的是开发模式，代码不会被压缩，如下：

现在我们把 mode 改成 production，打包过后，发现已经被压缩了，如下：

webpack 4 中的特异

在 webpack 5 中选择生产模式，mini-css-extract-pkugin 会自动压缩css，如上述的截图。
但是在 webpack 4 中我们需要做另外的设置，不然不会对css进行压缩。如下（看看就好）：

• 安装 optimize-css-assets-webpack-plugin

  yarn add optimize-css-assets-webpack-plugin --dev
  

• 配置webpack ```javascript import TerserWebpackPlugin = require(‘terser-webpack-plugin’); import OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin’);

module.exports = { //…. optimization:{// 手动指定压缩 minimizer:[new TerserWebpackPlugin({}), new OptimizeCssAssetsWebpackPlugin({})] }, //… } ``` terser-webpack-plugin 是 webpack 4 自带的 js 压缩。
optimize-css-assets-webpack-plugin 是 css 的压缩，配置 css 压缩包的同时必须配置 js 压缩，不然 js 就不会压缩。
这些在 webpack 5 中都自动实现了，不要配置。