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

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

因此，看起来文件加载器没有捆绑多个主入口点。这是文件加载器的工作方式吗？还是可以使用文件加载器并捆绑多个主入口点？

Answer 1

使用css-loader（https://github.com/webpack-contrib/css-loader）捆绑软件。由于webpack是JS模块捆绑程序，因此它本身不了解CSS。

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

1 个答案: