Webpack：将多个供应商 css 捆绑在一个单独的文件中？答案

【问题标题】：Webpack: bundle multiple vendor css in one separate file?Webpack：将多个供应商 css 捆绑在一个单独的文件中？
【发布时间】：2018-05-12 18:42:18
【问题描述】：

我想用 webpack 3.8 将几个标准库打包成两个文件 bundle.js 和 bundle.css

这是我的 webpack.config.js：

const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const path = require("path");

module.exports = {
  entry: {
    'vendor': [
      'jquery',
      'popper.js',
      'bootstrap',
    ],

  },

    output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: 'bundle.js'
  },

  module: {
              rules:[
                    {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                      fallback: "style-loader",
                      use: "css-loader"
                    })
                  }
                ],


  },

  plugins: [

    new webpack.optimize.UglifyJsPlugin({
      uglifyOptions: {
        compress: true 
      }
    }),

    new ExtractTextPlugin("styles.css"),

  ]
};

运行 webpack 后，我只得到 bundle.js 文件：

    Asset    Size  Chunks                    Chunk Names
bundle.js  264 kB       0  [emitted]  [big]  vendor

我应该如何配置 webpack 来生成 bundle.css ？

【问题讨论】：

你能分享你的供应商文件吗？您的供应商中包含的文件。我认为您没有在上面导入任何 .css 文件。
@Pravesh Khatri 也许 :)，我没有找到关于我的案例的任何示例，所以我只需将所有带有 npm 的包安装在标准文件夹中，如 /home/user_folder/projects/project_folder/node_modules/bootstrap。我需要分别为每个供应商包导入 css 文件吗？
如果您在上述条目中提供的文件中导入了任何 .css 文件。然后它将在您提供的加载器的帮助下自动创建一个包。其他明智的做法是将其包含在您的入口点中。
谢谢，我现在就试试这个。我是否理解正确：webpack 可以自动找到必要的 js 文件，但不能找到 css 文件？
我认为他们可以找到任何类型的文件，因为我们提供了他们各自的加载器。因为，加载程序负责查找在入口点提供的文件中导入的文件

标签： webpack webpack-style-loader

【解决方案1】：

有两种方法可以做到。

第一

您可以在入口点提供的文件中导入您的.css 文件。

例如。

如果entry: index.js

在index.js 你必须导入你的css文件

import './*.css'      // all css files in root

第二

您可以在入口点中提供它。

entry: {
   {
    'vendor': [
      'jquery',
      'popper.js',
      'bootstrap',
    ],
    'styles': '/*.css'    
  }
}

【讨论】：