《十三》对打包后的 CSS 文件的分离

MiniCssExtractPlugin：是一个后处理插件，可以在 Webpack 打包之后，将 CSS 样式从 bundle 中提取出来生成独立的 CSS 文件，并将其引入到 HTML 中。

1. 安装 MiniCssExtractPlugin 插件：npm install mini-css-extract-plugin --save-dev。
2. 新建 src/index.css，并编写代码。

   // src/index.css
   .container {
     width: 100%;
     height: 100%;
     background: 'red';
   }
   

3. 新建 src/index.js，并编写代码。

   // src/index.js
   import './index.css'
   

4. 在 Webpack 配置文件中进行配置。

   // webpack.config.js
   const MiniCssExtractPlugin = require('mini-css-extract-plugin')
   
   module.exports = {
     module: {
       rules: [
         // 使用 MiniCssExtractPlugin.loader 和 css-loader 转换 css 文件
         {
           test: /\.css$/,
           use: [MiniCssExtractPlugin.loader, 'css-loader'],
         }
       ]
     },
     plugins: [
       // 使用 MiniCssExtractPlugin 将 css 抽取到打包输出的文件夹下的 css 文件夹下单独的文件中
       new MiniCssExtractPlugin({
         filename: 'css/[name].css',
       })
     ]
   }
   

5. 运行 webpack 命令进行打包，会发现，CSS 文件被打包为了单独的文件。