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

Question

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

例如：

• 的src /
  • 的test.html
  • test.ts

test.ts导入lodash。

我想输出：

• 构建/
  • vendor.js（在这种情况下是lodash，以及任何webpack逻辑）
  • 的src /
    • 的test.html
    • test.js

有办法做到这一点吗？

我当前的webpack配置：

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