Webpack與Thridparty包

Question

我想提供一個webpack包，其中包含所有常見的第三方供應商（角1.4，jQuery和其他庫）。

目前後續模塊開發

• 模塊A
• 賣方模塊

賣方模塊：

創建具有所有thridparty庫一個簡單的模塊（角1.4，jQuery的，和其他一些庫）

個webpack.config.js：

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
     entry: { 
      vendor: './index.js', 
     }, 
     output: { 
      // filename: '[chunkhash].[name].js', 
      filename: '[name].js', 
      path: path.resolve(__dirname, 'dist') 
     }, 
     plugins: [] 
    } 

index.js：

require('jquery'); 
require('angular'); 

模塊A：

index.js：

var angular = require('angular'); 
var myJQ = require('jQuery'); 
var app = angular.module("Test", []); 

console.log("Angular Boostrap"); 
console.log(app); 
console.log("jQuery Boostrap"); 
console.log(myJQ); 

webpack.config.js：

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
     entry: { 
      main: './index.js', 
     }, 
     externals: { 
      angular: 'angular', 
      "jQuery": { 
       root: '$', 
       commonjs: 'jquery', 
       amd: 'jquery' 
      } 
     }, 
     output: { 
      filename: '[name].js', 
      path: path.resolve(__dirname, 'dist') 
     }, 
     plugins: [] 
    } 

模塊A index.js可能需要「角度」和我看到正確的輸出，但來自「的jquery」的需要失敗，錯誤。

在我的腦海裏有兩個問題。

1. 哪種包含第三方供應商的常見方式？
2. 請告訴我錯在模塊一個jQuery index.js

謝謝。

Answer 1

1 .:包含第三方供應商的最佳方式是DllPlugin。它完全符合你的需求，將你的應用分成兩個捆綁包。這種方式構建過程是快速，獨立的，你的應用程序沒有限制，因爲dllPlugin連接兩個包。可悲的是，目前還沒有關於webpack v2文檔中有關dllPlugin的文檔，但是有教程，如https://robertknight.github.io/posts/webpack-dll-plugins/

2 .:我認爲它取決於您使用的是哪個jQuery。如果jQuery將自動將自己暴露到窗口，嘗試

的外部：{jQuery的： 'window.jQuery'}