webpack-拆分文件并创建2个bundle

Question

我试图用webpack实现以下目标

简而言之，我有两个切入点：

app.js和app2.js

null

我的webpack配置在这里：

var webpack = require("webpack");
const createVendorChunk = require('webpack-create-vendor-chunk');

module.exports = {
 entry: {
   app:"./src/js/app.js",
   app2:"./src/js/app2.js"

 },
 output: {
     path: './bin',
     filename:"[name].bundle.js",
 },
 module: {
     loaders: [{
         test: /\.js$/,
         exclude: /node_modules/,
         loader: 'babel-loader'
     }]
 },
 resolve: {
   extensions: ['', '.js', '.es6']
 },
 plugins: [
   /*
   new webpack.optimize.CommonsChunkPlugin({
     name: "vendor",
     filename: "vendor.min.js",
     minChunks: Infinity
   })
    */
    createVendorChunk({
      name:"vendor.min.js"
    }),

    createVendorChunk({
      name:"common.min.js",
      chunks:["common"]
     }),

   ]
 };

完整的项目在这里：https://github.com/mydiscogr/webpack-babel-config/

Answer 1

你能试试这个吗？

entry: {
   app:"./src/js/app.js",
   app2:"./src/js/app2.js"
   vendor: [
      'jquery',
      'moment',
      'lodash',
      'some other vendor'
   ]
},
output: {
   path: './bin',
   filename:"[name].bundle.js",
},
module: {
   loaders: [{
     test: /\.js$/,
     exclude: /node_modules/,
     loader: 'babel-loader'
   }]
},
resolve: {
  extensions: ['', '.js', '.es6']
},
plugins: [
  // it moves cat.js to common.js
  new webpack.optimize.CommonsChunkPlugin({
     name: 'Common',
     chunks: ['App1', 'App2']
  }),
  // some third party libraries (eg: jquery, moment) when used in App1, App2, and Common moves to vendor.js
  new webpack.optimize.CommonsChunkPlugin({
     name: 'Vendor',
     minChunks: Infinity
  }    


  // Just Other Tricks!!
  // Delete 2 CommonsChunkPlugin option above and add this
  new webpack.optimize.CommonsChunkPlugin({
     // The order of this array matters
     names: ['Common', 'Vendor'],
     minChunks: 2
  })
]

如果有用就告诉我