Webpack: 如何将多个第三方CSS文件打包成一个单独的文件？

Question

我希望使用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文件？

- sr9yar

---

你能分享一下你的供应商文件吗？这些文件包含在你的供应商中。我认为你没有在上述文件中导入任何 .css 文件。 - Pravesh Khatri

@Pravesh Khatri 可能吧 :), 我没能找到任何关于我的情况的例子，所以我只是在标准文件夹中使用npm安装了所有包，例如/home/user_folder/projects/project_folder/node_modules/bootstrap。我需要单独为每个供应商包导入css文件吗？ - sr9yar

如果您已经在上面的条目中提供的文件中导入了任何.css文件，则它将自动使用您提供的加载器创建一个bundle。否则，您需要在入口点中指定包含它的方式。 - Pravesh Khatri

谢谢，我现在就去尝试一下。我的理解是：webpack可以自动找到必要的js文件，但不能自动找到css文件，对吗？ - sr9yar

我认为他们会找到任何类型的文件，因为我们提供了它们相应的加载程序。加载程序负责查找在您提供的入口点文件中导入的文件。 - Pravesh Khatri

Answer 1

有两种方法可以实现。

第一种

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

例如：

如果 entry: index.js

则在 index.js 中，您需要导入您的 css 文件。

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

第二步

你可以在入口点提供它。

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

- Pravesh Khatri