ビルCSSとのWebPACK 1とJavaScriptファイル

Question

私はwebpack.configファイル内のJSバンドルファイルとして出力CSSの両方にしようとしていますが、私は二つの問題に直面しています両方：

1）私の出力ファイルがあります。拡張子はjsですが、出力ファイルの1つがCSSファイル（scss.bundle.css）である必要があります。どうすればこの仕事をすることができますか？

2）ローダーは正しい出力ファイルにリンクされている必要がありますが、現在正しく動作しているとは思われません。

ここで私を助けることができるかどうか教えてください。私が思うウェブパックについては、かなり限られた知識しかありません。

var debug = process.env.NODE_ENV !== "production"; 
var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    context: "", // directory we currently in 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: { 
     client: "./js/client.js", 
     scss: "./css/compactview.scss" 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: '[name].bundle.js' // when out putting we create this kind of file 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js?$/, //anything thats a JS file gets run through babel-loader 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015'], 
        plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'] 
       } 
      }, 
      { 
       test: /\.scss$/, // any scss files 
       loaders: ['style', 'css', 'sass'], 
       include: 
      } 
     ] 
    }, 
    watch: true, //automatically watch files when running webpack 
    plugins: debug ? [] : [ //if in debug mode, no plugins - if in production .. 
     new webpack.optimize.HotModuleReplacementPlugin(), 
     new webpack.optimize.DedupePlugin(), //strip out duplicate code 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), //gets rid of sourcemaps, comments, etc 
    ], 
}; 

Answer 1

バンドルの外に、別のCSSファイルにCSSを引っ張ってExtractTextPluginを使用してください。

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

// multiple extract instances 
let extractCSS = new ExtractTextPlugin('stylesheets/[name].css'); 
let extractLESS = new ExtractTextPlugin('stylesheets/[name].less'); 

module.exports = { 
    ... 
    module: { 
    loaders: [ 
     {test: /\.scss$/i, loader: extractCSS.extract(['css','sass'])}, 
     {test: /\.less$/i, loader: extractLESS.extract(['css','less'])}, 
     ... 
    ] 
    }, 
    plugins: [ 
    extractCSS, 
    extractLESS 
    ] 
}; 

webpack 2プラグインは異なる点に注意してください。