Webpack bundle all css and load first

Question

How to bundle all the css file together and load on the top of the head before the document loads using webpack ?

Answer 1

From my understanding, using a dummy .js file in order just to build a global/shared css bundle which imports needed css files may be a solution. I don't know if this is a best practice but works for me. An alternative approach may bu using Webpack together with Gulp, but it means an extra step will be required in every build.

So in webpack.config.js I have an entry such as:

        entry: {
          'product-detail': './Assets/js/pages/product-detail.js',
          'product-list': './Assets/js/pages/product-list.js',
          'global-css-generator': './Assets/js/global-css-generator.js'
          'common-bundle': ['jquery']
        },

In global-css-generator.js file, I just import the needed less files:

        import './../../less/bootstrap.less';
        import './../../less/global.less';
        .
        .