使用文件加载器将 Webpack 多个入口点捆绑到一个文件中

Question

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

但我也想捆绑我的 css 文件。它们也不相互依赖，因此在 css 代码中没有使用导入规则。只有多主 webpack 条目。为此，我使用文件加载器。但我最终会得到单独的文件，否则最后一个会覆盖第一个。

我的代码的简化

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);
})

这将得到一个仅包含最后一个 css 文件的 css 的 bundle.css。第一个被第二个覆盖。如果我在 name: '[hash].css' 这样的文件名中使用 [hash]，我最终会得到两个 css 文件。

所以看起来文件加载器没有捆绑多个主要入口点。这是文件加载器的工作方式吗？或者是否可以使用文件加载器并捆绑多个主要入口点？

Answer 1

对包使用 css-loader (https://github.com/webpack-contrib/css-loader)。由于 webpack 是 JS 模块打包器，它本身并不理解 CSS。