Javascript 使用webpack生成供应商捆绑包和一对一源文件

如何使用webpack（v2.x）生成单个供应商包和单独的源文件

例如：

• src/
  • test.html
  • test.ts

其中

test.ts

导入

lodash

我想输出：

• 建造/
  • vendor.js（本例中为lodash，以及任何网页包逻辑）
  • src/
    • test.html
    • test.js

有办法做到这一点吗

我当前的网页包配置：

const webpack = require('webpack');
const { CheckerPlugin } = require('awesome-typescript-loader');
const glob = require('glob');
const path = require('path');

const srcDir = path.join(__dirname, 'src');
const buildDir = path.join(__dirname, 'build');

module.exports = {
  bail: true,
  devtool: 'source-map',
  entry: glob.sync('./src/**/*'),
  output: {
    path: buildDir,
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      { parser: { requireEnsure: false } },
      {
        test: /\.(js|ts)$/,
        enforce: 'pre',
        loader: 'tslint-loader',
        include: srcDir
      },
      {
        test: /\.(js|ts)$/,
        loader: 'awesome-typescript-loader',
        include: srcDir
      },
      {
        exclude: [
          /\.(js|ts)$/
        ],
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    new CheckerPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: (module) => {
        return module.context && module.context.indexOf('node_modules') !== -1;
      }
    })
  ]
}

不幸的是，这会产生以下结果：

• 建造/
  • vendor.js
  • main.js