webpack如何打包多個CSS文件以及關(guān)于打包CSS的一些疑惑

最近有一個項目,需要聯(lián)動webpack來開發(fā)
問題：

1.我有多個CSS文件如何將多個CSS文件通過webpack打包成一個CSS文件?
2.如何同時打包JS與css并且生成對應(yīng)的CSS與JS文件?

下面是我的代碼

var webpack=require('webpack'); var path=require('path');
 var ex = require("extract-text-webpack-plugin");
  var packCSS = new ex('./css/[name].min.css'); 
  // var HtmlWebpackPlugin=require('html-webpack-plugin');
   // var autoprefixer= require('autoprefixer');
    var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
     module.exports={
    //入口文件配置
    entry:{
        style_js:"./src/style-index.js"
    },    // 輸出文件配置
    output:{
        path:path.resolve(__dirname,'build'),
        filename:"[name].css",
        publicPath: '/build/dist/' //動態(tài)背景圖片地址
    }, //    模塊加載方式配置
    module:{
        loaders: [
            //加載方式
            {
                test: /\.css$/,
                loader:ex.extract("style-loader","css-loader")
            },
            // 字體文件打包方式及路徑
            {test: /\.(eot|svg|ttf|woff|woff2)\w*/,loader: 'file-loader?publicPath=template/newtpl/&outputPath=font/'},
            // 打包圖片及地址
            {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
            // SVG打包方式
            {test: /\.svg/, loader: 'svg-url-loader'},
            //js打包方式
            // {test:/\.js$/,exclude:/node_modules/,loader:'babel-loader'}
        ]
    }, //    插件配置
    plugins:[
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        }),
        new webpack.optimize.UglifyJsPlugin(),
        packCSS
    ]

};

打包后總是提示

Module parse failed: Unexpected token (1:1) You may need an
appropriate loader to handle this file type.
所有需要的模塊我都已安裝

附上packe.json文件

{
  "devDependencies": {
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.2",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0"
  }
}