3

I use a webpack config in which I use an array of file paths as entry point. Also known as multi-main entry. These files are not dependant on each other, but I want to bundle them. The js bundle just fine. Webpack creates a bundle js file containing the contents of all js files.

But I also want to bundle my css files. They are also not dependant on each other so no import rule is used in the css code. Only the multi-main webpack entry. For this I use the file-loader. But I end up with separate files or the last overwrites the first.

A simplification of my code

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

This will end up with a bundle.css containing only the css of the last css file. The first get's overwritten by the second. If I use a [hash] in the file name like name: '[hash].css' I end up with two css files.

So it looks like the file-loader doesn't bundle multi main entry points. Is this how file-loader works? Or is it possible to use file-loader and bundle multi main entry points?

Shizzler
  • 31
  • 4

1 Answers1

2

Use css-loader (https://github.com/webpack-contrib/css-loader) for the bundle. As webpack is JS module bundler, it doesn't understand CSS natively.

Jongmin Kim
  • 21
  • 3
  • I actually use extract-loader, css-loader, sass-loader and postcss-loader to bundle sass files. I just simplified the code a bit. That's not the problem I'm facing, but let me for clarity sake add the loader to my example code. The problem I'm having is that when I use multiple entry points and those entry points are not tied together using @import rules, file-loader does not bundle them. – Shizzler Sep 28 '18 at 06:53
  • The point is the entry array in your webpack.config.js is for your JS files, not for your css files. What you're trying to do is a kind of concatenating multiple css files into one or two by using webpack. [Answer to Webpack 1.12: Bundle css files](https://stackoverflow.com/a/42091838/6657570) – Jongmin Kim Oct 12 '18 at 00:22