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'}