大厦CSS和使用的WebPack 1 Javascript文件

Question

我试图同时输出一个css作为我webpack.config文件中的JS包文件，但我现在面临两个问题：

1）我的输出文件有一个。 js扩展名，但其中一个输出文件需要是一个css文件（scss.bundle.css）。我将如何完成这项工作？

2）我的装载机需要链接到正确的输出文件，我不认为这是正确的工作。

请让我知道你是否能够在这里帮助我。我认为webpack的知识非常有限。

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

使用ExtractTextPlugin拉出来的CSS的捆绑，并成为一个独立的CSS文件。

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插件是不同的。