Webpack 2を使用して古き良きjavascriptコードをパッケージ化するために取り組んでいます。このコードでは、Leaflet 1.0ライブラリを使用しています。リーフレットが公開するグローバル変数L
を参照するLeafletプラグイン(Google.jsという)も含まれています。Webpackを使用してグローバル参照に外部スクリプトを含める
現在のhtmlページでは、リーフレット、次にプラグイン(Google.js)が読み込まれ、map1.js
コードがスクリプトタグを介して読み込まれます。どちらがうまくいくの?
私は、次のwebpack.config.js
を作成しました:
var path = require('path');
module.exports = {
devtool: 'cheap-eval-source-map',
entry: {
map1: './js/map1.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
をしてmap1.js
に、私はWebPACKのための依存関係の要件を定義するには、以下を追加しました:
import bootstrap from 'bootstrap';
import leaflet from 'leaflet';
require('script-loader!./lib/Google.js');
bundle.js
は、しかし、とき問題なくビルドしますページ読み込み:
Uncaught TypeError: Cannot read property 'call' of undefined at NewClass.whenReady (eval at (bundle.js:79), :3641:12) at NewClass.addLayer (eval at (bundle.js:79), :4057:8) at eval (eval at (bundle.js:176), :118:7) at eval (eval at (bundle.js:176), :232:3) at Object. (bundle.js:176) at __webpack_require__ (bundle.js:20) at bundle.js:66 at bundle.js:69エラーが発生したライン79を見ると0
は:
eval("var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/*\n Leaflet 1.0.3, a JS library for interactive maps...
それはリーフレットコードのevalのをやって上の失敗に表示されます。リーフレットをウェブパックに組み込むために何か他のことをしなければならないのでしょうか?
ソースマップのevalに問題があるようですが、本当に「安価なeval-source-map」が必要なのですか、それともソースマップの設定ですか?代わりに 'インラインソースマップ'を試しましたか? –
'webpack.config.js'の' devtool'行を削除しました。残念ながら、ハードリフレッシュ時に同じエラーメッセージが表示されます。 – timbo