Question

在 Webpack 5 中， extract-text-webpack-plugin 已被弃用，推荐使用 mini-css-extract-plugin 代替。

使用 mini-css-extract-plugin ：

1. 安装插件 :

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

2. 配置 Webpack :

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

如果你在使用 Webpack 4 或更早版本， extract-text-webpack-plugin 依然有效；否则，推荐迁移到 Webpack 5 及其推荐的插件。

本章参考

• 前端十年回顾 | 漫画前端的前世今生 https://developer.jdcloud.com/article/2851
• 白屏问题和 FOUC - 简书 https://www.jianshu.com/p/6617efa874b0
• Webpack 常用插件总结 https://blog.csdn.net/qq_39040042/article/details/88019723
• 常用的 18 个 webpack 插件总结 https://blog.csdn.net/weixin_43720095/article/details/107720200
• webpack 打包分析与性能优化 https://zhuanlan.zhihu.com/p/25212283
• webpack 之前端性能优化 https://www.cnblogs.com/ssh-007/p/7944491.html
• Webpack-dev-server 的 proxy 用法 https://segmentfault.com/a/1190000016314976