webpack - 拆分文件并创建 2 个包答案

【问题标题】：webpack - splitting files and create 2 bundlewebpack - 拆分文件并创建 2 个包
【发布时间】：2017-04-08 17:37:54
【问题描述】：

我正在尝试使用 webpack 实现以下目标

简而言之，我有 2 个入口点：

App.js 和 App2.js

App1.js 与 App1def.js 有依赖关系 App2.js 依赖于 App2def0x.js 文件 Cats.js 被 App1.js 和 App2.js 使用

所有 appx.js 文件还依赖于 Jquery 和 babel-polyfill

我想编译：

Vendor.min.js 包含 jquery、babel-polyfill (shim)
Common.min.js 包含 Cats.js（appx.js 使用的通用文件）
App1.boundle.js 包含 app1def.js
App2.boundle.js 包含 app2def01.js app2def02.js

我的 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/

【问题讨论】：

标签： javascript webpack babeljs

【解决方案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
  })
]

让我知道它是否有效

【讨论】：