Webpack:将多个 vendor 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'    
  }
}