webpack：当使用 2 个入口文件时，两个文件都包含相同的 css - 有解决方法吗？答案

【问题标题】：webpack: when using 2 entry files, both files include the same css - is there a workaround?webpack：当使用 2 个入口文件时，两个文件都包含相同的 css - 有解决方法吗？
【发布时间】：2020-04-26 18:45:18
【问题描述】：

我使用了 2 个入口文件，startpage.js 和 subpage.js，并通过 HTMLWebpackPlugins 块参数成功地将它们分配给它们的 HTML 文件。

但由于该解决方案需要在 startpage.js 和 subpage.js 中包含 CSS 文件，这会导致“麻烦加倍”（至少在构建过程中），我决定创建另一个文件 @987654326 @，并将import 'main.css' 声明放在那里。（而且我还有一个 vendor 文件，应该放在 HTML 的标题中，这应该通过添加 _head 根据文档来实现：https://github.com/architgarg/html-webpack-injector - 但这也不起作用......）

这是当前的 webpack 配置（摘录）：

module.exports = {
  entry: {
    app_head: './src/css/main.css',
    vendor_head: './src/scripts/vendor/_all_vendor.js',
    startpage: './src/scripts/startpage.js',
    subpage: './src/scripts/subpage.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, '../public'),
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/templates/index.ejs',
      chunks: ['app_head', 'vendor_head', 'startpage'],
      chunksConfig: {
        defer: ['startpage']
      },
      excludeChunks: ['subpage'],
      bodyCss: 'is-startpage',
    }),
    new HtmlWebpackPlugin({
      filename: 'publication.html',
      template: './src/templates/publication.ejs',
      chunks: ['subpage'],
      chunksConfig: {
        defer: ['subpage']
      },
      excludeChunks: ['startpage'],
      bodyCss: 'is-subpage',
    }),
    [...]

app_head.css 被正确放置在 HTML 的 head 部分，但它也会生成一个无用的 app_head.js，它只包含 webpack 代码。不幸的是，我不知道如何在不排除 CSS 的情况下排除该文件。

有没有更好的方法来分离 CSS 生成过程而不会产生开销或垃圾？

【问题讨论】：

标签： webpack-4

【解决方案1】：

问题是你没有初始化 html-webpack-injector 插件。

// import above
const HtmlWebpackInjector = require('html-webpack-injector');

plugins: [
    new HtmlWebpackPlugin(...),
    new HtmlWebpackPlugin(...),
    new HtmlWebpackInjector() // add this in plugins array

【讨论】：

谢谢！并感谢您的校对 - 非常感谢！！！