Webpackで外装を自動的にロード

Question

私はいくつかの検索をしましたが、ここに優雅なソリューションがあるのだろうかと思っていました。 Webpackアプリケーションを構築する際には、jQuery、React、ReactDOM、Angular、Bootstrapなどのコンパイル/バンドルする必要のない依存関係を持つことが一般的です。これらはWebpack設定ファイルのexternalsオブジェクトに列挙できますが、外部からはこれらのライブラリが実行時に名前空間のグローバルとして利用できると仮定しているだけです。

これは、externalsハッシュの各エントリについて、HTMLのスクリプトタグを使用する必要があることを意味します。これは外部のCDNを参照している場合には意味がありますが、node_modulesのライブラリからdistファイルをコピーするだけであれば、自動化できると思っています。

私はこれを行う方法の例を探していましたが、私はまだ見たことがありません。私はexternal-loaderと混乱しましたが、私はそれを統合する運がなかった（ドキュメントは完全な例を提供していないようです）。

基本的に、これが起こる必要があるでしょう：同梱されてはならない

1. ライブラリーは、例えば、resolve.aliasに追加する必要があります{"react": "react/dist/react.js"}
2. ローダコピーパブリックディレクトリへのdistのファイル（多分これはただfile-loaderで行うことができる？）
3. HTMLローダーまたは多分プラグインがbundle.jsスクリプトタグ

前にスクリプトタグを挿入

このようなものが存在しない場合、私はそれを作ることを試みるかもしれません。私はちょうど誰かが事前に焼いた解決策を知っているかもしれないかどうかを知るためにこれをここに掲示しています。それはWebアプリケーションを構築するための共通の問題であると思われ、

Answer 1

既存の解決策が見つかりませんでしたので、HtmlWebpackPluginを補うプラグインを作成しました。外部の配列を取り、スクリプト/リンクタグをHTMLファイルに追加し、外部ハッシュを生成し、CDNまたはローカルファイルを使用することができます。

https://github.com/mmiller42/html-webpack-externals-plugin

Answer 2

var path = require("path"); 
 
var webpack = require('webpack'); 
 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
 
var HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin'); 
 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
 
var helpers = require('./helpers'); 
 

 
var WebpackNotifierPlugin = require('webpack-notifier'); 
 

 
module.exports = { 
 
    entry: { 
 
     'index-ref': './app/index-ref.ts', 
 
     'vendor': './app/vendor.ts', 
 
     'app': './app/main.ts', 
 
    }, 
 

 
    resolve: { 
 
     extensions: ['', '.ts', '.js'] 
 
    }, 
 

 
    module: { 
 
     loaders: [ 
 
      { 
 
       test: /\.ts$/, 
 
       loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
 
      }, 
 
      { 
 
       test: /\.html$/, 
 
       loader: 'html' 
 
      }, 
 
      { 
 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
 
       loader: 'file?name=assets/[name].[hash].[ext]' 
 
      }, 
 
      { 
 
       test: /\.css$/, 
 
       exclude: helpers.root('app'), 
 
       loader: ExtractTextPlugin.extract('style', 'css?sourceMap') 
 
      }, 
 
      { 
 
       test: /\.css$/, 
 
       include: helpers.root('app'), 
 
       loader: 'raw' 
 
      } 
 
     ] 
 
    }, 
 

 
    plugins: [ 
 
     new webpack.optimize.CommonsChunkPlugin({ 
 
      name: ['app', 'vendor', 'index-ref'] 
 
     }), 
 

 
     new HtmlWebpackPlugin({ 
 
      filename: '../index.html', 
 
      template: 'template' + '/default.html', 
 
      lib: ['jQuery'], 
 
      chunks: ['entry-name'] 
 
     }), 
 
     new HtmlWebpackExternalsPlugin([ 
 
     // Using a CDN for a JS library 
 
     { 
 
      name: 'jquery', 
 
      var: 'jQuery', 
 
      url: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js' 
 
     } 
 
     ], 
 
     { 
 
      basedir: 'node_modules', 
 
      dest: 'lib' 
 
     }), 
 

 
      new WebpackNotifierPlugin() 
 
    ] 
 
};

私はここで何をしないのですか？