Webpack捆绑所有CSS并首先加载 [英] Webpack bundle all css and load first

问题描述

在使用Webpack加载文档之前，如何将所有css文件捆绑在一起并加载到头部顶部?

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

推荐答案

根据我的理解，使用虚拟.js文件只是为了构建导入所需css文件的全局/共享css捆绑包可能是一种解决方案.我不知道这是否是最佳做法，但对我有用.可以将Webpack与Gulp一起使用，这是一种替代方法，但这意味着在每个构建中都需要额外的步骤.

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.

因此在webpack.config.js中，我有一个条目，例如:

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']
        },

在global-css-generator.js文件中，我只导入了所需的较少文件:

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

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

这篇关于Webpack捆绑所有CSS并首先加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！