Webpack：複数のベンダのcssを1つのファイルにバンドルするか？私はこれが私のwebpack.config.jsあるのWebPACK 3.8</p> <p>で2つのファイルbundle.jsとbundle.cssにいくつかの標準ライブラリをバンドルしたい

Question

：WebPACKのを実行した後

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"), 

    ] 
}; 

、私は唯一のバンドルを取得します.jsファイル：

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

bundle.cssを生成するにはどのようにwebpackを設定する必要がありますか？

Answer 1

これには2通りの方法があります。

まず

あなたは、エントリポイントで提供されるファイルで、あなたの.cssファイルをインポートすることができます。

たとえば、

index.jsでentry: index.js

場合は、あなたのエントリポイントに

あなたがそれを提供することができます

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

第二に、あなたのcssファイルをインポートする必要があります。

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