javascript - 如何使用 html webpack 插件将文件加载器所需的 css 文件包含到 index.html 中

Question

我想在不使用 style-loader 或 css-loader 的情况下加载 css。因为它增加了包的大小。所以我使用 file-loader 来加载 css 文件。这将生成一个带有随机哈希作为文件名的 css 文件，如 2309843904.css。现在我如何将其包含在 index.html 中。我使用 html-webpack-plugin 但我不知道如何将此 css 文件包含在 index.html 中。

Answer 1

使用 mini css extract plugin根据 webpack docs 以及 style-loader 和 css-loader会做同样的事情。它会将 CSS 从 bundle 中剥离到一个单独的文件中，并通过 html 头部的注入(inject)链接标记加载它。您可以散列名称，例如，像这样:

      //webpack config module.rules
      {
        test: /\.(sa|sc|c)ss$/,
        loaders: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          ...
        ],
      },
      //then in module.plugins
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[name].[contenthash].css',
    }),