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？

Answer 1

有两种方法。

第一

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

例如

如果entry: index.js

在 index.js 中，您必须导入 css 个文件

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

第二

您可以在入口点提供它。

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

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

Webpack: bundle multiple vendor css in one separate file?

webpack

webpack-style-loader