Javascript 使用文件加载器将网页包多个入口点捆绑到一个文件中

我使用一个webpack配置，其中我使用一个文件路径数组作为入口点。也称为多主入口。这些文件互不依赖，但我想将它们打包。js包很好。Webpack创建一个包含所有js文件内容的捆绑js文件

但我还想捆绑我的css文件。它们也不相互依赖，因此css代码中不使用导入规则。只有多主网页项。为此，我使用文件加载器。但我最终得到了单独的文件，或者最后一个文件覆盖了第一个文件

我的代码的简化

webpack({
  entry: [
    './jsFileA.js',
    './jsFileB.js',
    './cssFileA.css',
    './cssFileB.css'
  ],
  output: {
    path: './',
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: css-loader
      }, {
        loader: style-loader
      }, {
        loader: 'file-loader',
        options: {
          name: 'bundle.css'
        }
      }]
    }]
  }
}, (error, stats) => {
  console.log(stats);
})

这将导致bundle.css只包含最后一个css文件的css。第一个get被第二个get覆盖。如果我在文件名中使用[hash]，比如

name:'[hash].css'

我会得到两个css文件

---

所以看起来文件加载器没有绑定多个主入口点。文件加载器就是这样工作的吗？或者可以使用文件加载器和捆绑多个主入口点吗？

对捆绑使用css加载器（）。由于webpack是JS模块绑定器，它不理解CSS本身。

我实际上使用提取加载程序、CSS加载程序、sass加载程序和POSTSS加载程序来绑定sass文件。我只是把代码简化了一点。这不是我面临的问题，但为了清楚起见，让我将加载程序添加到示例代码中。我遇到的问题是，当我使用多个入口点，并且这些入口点没有使用@import规则绑定在一起时，文件加载器不会将它们绑定在一起。问题是，webpack.config.js中的入口数组用于js文件，而不是css文件。您试图做的是使用webpack将多个css文件连接成一个或两个。