如何避免Webpack打包后页面加载时出现闪烁问题？

你的推测完全正确——页面闪烁是因为style-loader把CSS打包进了JS文件，只有当JS加载执行后，CSS才会被插入到页面中，导致页面先显示无样式的内容（FOUC，无样式内容闪烁）。下面是具体的解决方法：

核心方案：提取CSS为独立文件 #

使用mini-css-extract-plugin插件将CSS从JS中分离出来，生成单独的CSS文件，然后在HTML的<head>中提前引入该文件，让浏览器优先加载样式。

步骤1：安装插件 #

在项目中安装mini-css-extract-plugin：

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

步骤2：修改Webpack配置 #

修改你的webpack配置文件，替换style-loader并添加插件配置：

1. 先引入插件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

2. 替换CSS规则中的style-loader：
   将原来的CSS处理规则

{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader']
},

修改为：

{
  test: /\.css$/i,
  use: [MiniCssExtractPlugin.loader, 'css-loader']
},

3. 在plugins数组中添加插件实例：

plugins: [
  new MiniCssExtractPlugin({
    filename: path.join('css', '[name].css') // 输出到dist/css目录，文件名和对应JS文件保持一致
  }),
  // 保留你原来的CopyPlugin等其他插件
],

步骤3：在HTML中引入CSS文件 #

打包完成后，dist/css目录下会生成对应的CSS文件，在你的HTML文件的<head>标签中优先引入这些CSS：

<head>
  <!-- 先加载CSS，确保样式优先生效 -->
  <link rel="stylesheet" href="/dist/css/index.css">
  <link rel="stylesheet" href="/dist/css/import-bootstrap.css">
  <!-- 根据你的entry文件，引入对应生成的CSS -->
  <!-- 再加载JS文件 -->
  <script src="/dist/js/index.js"></script>
</head>

额外优化（可选） #

如果是生产环境，还可以安装css-minimizer-webpack-plugin压缩CSS，减少文件体积和加载时间：

npm install css-minimizer-webpack-plugin --save-dev

然后在webpack配置中添加优化规则：

optimization: {
  minimizer: [
    `...`, // 保留默认的JS压缩器
    new CssMinimizerPlugin(),
  ],
},

修改完成后，浏览器会在加载HTML时优先加载CSS，页面就不会出现无样式闪烁的问题了。

内容的提问来源于stack exchange，提问作者João Pimentel Ferreira