Webpack：配置npm模块加载

Question

我是webpack的新手，我找不到将node_modules中的供应商库与其依赖项（订单和主文件[js，css]）加载到单独的捆绑文件中的方法。
我曾经使用过bower_components，但根据this文档，我搬到了npm。

实施例

我的系统中有角度材质，它取决于角度和他自己的css文件（angular-material.css）。

我已经尝试了什么

我使用 webpack.optimize.CommonsChunkPlugin ，它确实加载了venodors js文件，但是按照我在配置文件中输入的顺序（参见下面附带的配置文件），如果我放了角度材料在角度运行失败之前。

我尝试将resolve对象配置为从“bower.json”中读取，该bower.json具有主文件描述和配置中的依赖项，但不能正常工作。

我的配置文件

let webpack = require("webpack");
let path = require("path");

// define preprocessor variables
const envOptions = {
NODE_ENV: "development",
  DEBUG: true,
  isProduction: false
};

// pass as JSON object into query string ?json=...
const envJson = require('querystring').encode({json:JSON.stringify(envOptions)});

module.exports = {
context: __dirname + "/app",
  entry: {
    app: "./app.ts",
    vendor: [
        "jquery",
        "angular-animate",
        "angular-aria",
        "angular-messages",
        "angular-resource",
        "angular-sanitize",
        "angular-ui-router",
        "angular-cache",
        "angularjs-toaster",
        "angular-translate",
        "angular-translate-handler-log",
        "angular-translate-loader-static-files",
        "angular-material",
        "angular",
        "angular-dynamic-locale",
        "ng-file-upload",
        "angular-permission",
        "moment",
        "angular-moment",
        "angular-hotkeys",
        "angular-scroll",
        "jquery.scrollbar",
        "lodash",
        "ag-grid",
        "angular-ui-tree"],
   },
  output: {
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.ts/, loader: ['ts-loader?transpileOnly=true', `ifdef-loader?${envJson}`], exclude: [nodeModulesDir], }
     ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery" : "jquery",
      "moment": "moment",
      "agGrid": "ag-grid"
    }),
    new webpack.optimize.CommonsChunkPlugin(
     { name: 'vendor', filename: 'vendor.bundle.js' ,  test: 'node_modules/'}
      )
  ],
  resolve:{
    modules: ['node_modules'],
    extensions: ['.ts','.js', '.css', '.scss'],
  },
  devtool: "#source-map"
};

我想要实现什么

Webpack将生成2个包：

• vendor.bundle.js - 包含所有供应商主js的文件 文件的加载顺序正确。
• app.bundle.js - 包含我所有应用内部文件的文件。
• vendor.bundle.css - 包含所有供应商主要css文件的文件

两个供应商捆绑包应该与bower.json依赖关系中的定义一样 我的Webpack版本是2.1.0-beta.25