0

当我使用extract-text-webpack-plugin时，提取的单个 CSS 文件会index.html在创建生产构建时附加到我的。但是，我刚刚切换到mini-css-extract-plugin，当我为生产构建时，提取的单个 CSS 文件没有附加到我的index.html.

这是由产生的输出extract-text-webpack-plugin

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css"></link>
  <style>
    .ui.sidebar {
      overflow-y: visible !important;
    }
  </style>
  <title>profile updater</title>
<link rel="shortcut icon" href="/favicon.ico"></head>
<link rel="stylesheet" href="styles.c2c25cc46364fe37aad1.css">

<body>
  <div id="root"></div>
<script src="/static/vendor.c2c25cc46364fe37aad1.js"></script><script src="/static/app.c2c25cc46364fe37aad1.js"></script></body>

</html>

并注意我使用时的输出mini-css-extract-plugin，它没有附加样式表

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css"></link>
  <style>
    .ui.sidebar {
      overflow-y: visible !important;
    }
  </style>
  <title>profile updater</title>
<link rel="shortcut icon" href="/favicon.ico"></head>

<body>
  <div id="root"></div>
<script src="/static/vendor.c2c25cc46364fe37aad1.js"></script><script src="/static/app.c2c25cc46364fe37aad1.js"></script></body>

</html>

这是mini-css-extract-plugin配置

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              camelCase: true,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                ctx: {
                  autoprefixer: {
                    browsers: 'last 2 versions'
                  }
                }
              }
            }
          }
        ]
      }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      favicon: 'public/favicon.ico'
    })
    new MiniCssExtractPlugin({
      filename: 'styles/styles.[hash].css',
      chunkFilename: 'styles/styles.[hash].css'
    })
  ]

我是否需要添加一些其他配置才能将提取的 CSS 文件附加到index.html？也许一个额外的配置html-webpack-plugin？

4

0 回答 0