Question

我尝试使用webpack

来实现以下目标

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

App.js和App2.js

App1.js与App1def.js有依赖关系 App2.js与App2def0x.js文件有依赖关系 App1.js和App2.js

使用Cats.js.

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

我想编译：

Vendor.min.js提供jquery，babel-polyfill（垫片）
包含Cats.js的Common.min.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/

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
  })
]

让我知道它是否有效

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

1 个答案: