最近有一个项目,需要联动webpack来开发
问题：

1.我有多个CSS文件如何将多个CSS文件通过webpack打包成一个CSS文件?
2.如何同时打包JS与css并且生成对应的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/' //动态背景图片地址
    }, //    模块加载方式配置
    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"
  }
}