Question

我想将几个标准库捆绑到两个文件bundle.js和bundle.css with webpack 3.8

这是我的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

有两种方法可以做到。

<强>第一

您可以在入口点提供的文件中导入Pending On Hold Done个文件。

例如。

如果query myAwesomeQuery($isAwesome: Boolean) { awesomeField @include(if: $isAwesome) }

在.css中你必须导入你的css文件

entry: index.js

<强>第二

您可以在入口点提供。

index.js

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

1 个答案: