mini-css-extract-plugin

MiniCssExtractPlugin会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件
并且支持 CSS 和 SourceMaps 的按需加载

插件基于 webpack v5 的新特性构建，并且需要 webpack 5 才能正常工作

安装

npm i -D mini-css-extract-plugin

配置

文件：webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[contenthash].css' // 设置存放目录和文件名称
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ MiniCssExtractPlugin.loader, "css-loader" ],
      }
    ]
  }
}