如何让html-webpack-plugin排除mini-css-extract-plugin生成的css link标签

你可以通过对HtmlWebpackPlugin暴露的标签数组做类型过滤，实现CSS和JS引用拆分到独立文件输出，无需额外安装插件：

步骤1：修改webpack配置 #

新增一个HtmlWebpackPlugin实例，分别对应CSS引用文件和JS引用文件的输出：

module.exports = {
  entry: {
    main: path.resolve(__dirname, "./react/src/Index.js"),
    styles: path.resolve(__dirname, "./react/src/Styles.js"),
    vendor: path.resolve(__dirname, "./react/src/Vendor.js"),
  },
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "[name].[contenthash].js",
    assetModuleFilename: "images/[hash][ext][query]",
  },
  plugins: [
    new CleanWebpackPlugin(),
    // 输出CSS引用文件的实例
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./react/css-only.ejs"),
      filename: "main-css.html5",
      inject: false,
      publicPath: "/dist/",
      chunks: ["main", "styles"],
    }),
    // 输出JS引用文件的实例
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./react/js-only.ejs"),
      filename: "main-js.html5",
      inject: false,
      publicPath: "/dist/",
      chunks: ["main", "vendor"],
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
  ],
}

步骤2：创建两个过滤用的ejs模板 #

css-only.ejs（仅输出link标签） #

<%= htmlWebpackPlugin.tags.headTags.filter(tag => tag.tagName === 'link').join('') %>

js-only.ejs（仅输出script标签，兼顾head和body位置的script） #

<%= [...htmlWebpackPlugin.tags.headTags, ...htmlWebpackPlugin.tags.bodyTags].filter(tag => tag.tagName === 'script').join('') %>

步骤3：修改项目模板引入方式 #

<head>
<!-- 原有head代码 -->
<?php include_once 'dist/main-css.html5'; ?>
</head>
<body>
<!-- 原有页面HTML代码 -->
<?php include_once 'dist/main-js.html5'; ?>
</body>

实现原理 #

HtmlWebpackPlugin在渲染模板时，会把当前chunk的所有资源标签以结构化数组的形式暴露在htmlWebpackPlugin.tags对象中，每个标签元素都带有tagName属性，通过数组过滤即可拆分不同类型的资源引用。

内容的提问来源于stack exchange，提问作者Sirkow