WebpackのCSSとjsファイルの両方を構築する

Question

私の問題は、入力がsassファイルのときにwebpackがjsファイルとcssファイルを両方ビルドすることです。ここにあるのは webpack outputsです。私はちょうど両方のCSSで出力されるCSSファイルではない。私はそれを行う方法がわかりません。私は誰かが助けることを望む。 ここに私のコードです。

let path = require("path"); 
let webpack = require("webpack"); 
let ExtractTextPlugin = require("extract-text-webpack-plugin"); 

let SRC = path.join(__dirname, "client", "src"); 
let DIST = path.join(__dirname, "client", "dist", "bundles"); 

module.exports = [{ 
    entry: { 
     admin: SRC + "/js/admin/index.js", 
     main: SRC + "/js/main/index.js", 
     adminstyles: SRC + "/scss/admin/index.scss", 
     mainstyles: SRC + "/scss/main/index.scss" 

    }, 
    output: { 
     path: DIST, 
     filename: "[name]-bundle.js" 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
       name: 'commons', 
       filename: 'common.js', 
       chunks: ['admin', 'main'] 
      } 
     ), 
     new ExtractTextPlugin("[name]-bundle.css") 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract("css!sass") 
      }, 
      {test: /\.jsx?$/, loader: "babel-loader"} 
     ] 
    }, 
    resolve: { 
     extensions: ["", ".js", ".jsx"], 
     root: [path.join(__dirname, "client", "src", "js", "main")], 
     modulesDirectories: ["node_modules"] 
    } 
}]; 

Answer 1

すべてのエントリポイントは、コンテンツがextract-text-webpack-pluginで抽出された場合でも、WebPACKのブートストラップコードとJavaScriptのバンドルを取得します。 CSSに別のエントリポイントを使用するのではなく、対応するエントリポイントにそれらを含める必要があります。これは、スタイルが使用されるときに概念的に意味があります。各entryは配列も受け入れます。

あなたのエントリは次のようになります。

entry: { 
    admin: [SRC + "/js/admin/index.js", SRC + "/scss/admin/index.scss"], 
    main: [SRC + "/js/main/index.js", SRC + "/scss/main/index.scss"] 
}, 

あなたが変更することもできadminstyles名mainstylesを維持したいとした場合extract-text-webpack-pluginへ：

new ExtractTextPlugin("[name]styles-bundle.css")