Thridpartyバンドルを使用したWebpack

Question

一般的なthirdpartyベンダー（angular 1.4、jQuery、およびその他のライブラリ）を含むWebpackバンドルを提供したいと考えています。現在、フォローモジュールは

• モジュールA
• ベンダーモジュール

ベンダーモジュールを開発している

：

は、すべてthridparty LIBS（角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の」から必要はエラーで失敗しました。

私の心には2つの質問があります。

1. サードパーティのベンダーを含める一般的な方法はどれですか？
2. いただきましjQueryを使って間違ったモジュールA index.js

でいただきありがとうございます。

Answer 1

1：サードパーティベンダーを含める最も良い方法は、DllPluginです。それはあなたが望むものを正確に行い、あなたのアプリを2つのバンドルに分割します。そうすれば、dllPluginは両方のバンドルを接続するので、ビルドプロセスは高速で独立しており、アプリケーションに制限はありません。残念ながら、webpack v2のドキュメントにはまだdllPluginに関するドキュメントはありませんが、https://robertknight.github.io/posts/webpack-dll-plugins/

2のようなチュートリアルがあります。どのjQueryを使用するかによって異なります。 {jQueryの： 'window.jQuery'}

のjQueryが自動的にウィンドウ上に自分自身を公開している場合、

外観を試します