2016-08-08 6 views
4

webpackに関する問題があります。それはうまく構築されますが、私は私のサイトを開くとき、私は得る:Getting error: "Uncaught ReferenceError: webpackJsonp is not defined"Webpackビルドエラー

私のCommonsChunkPluginは私のアプリがバンドルされる前に実行されていると思う?

dist/js/に構築されているsrc/config/webpack.config.jsに私の設定があることを知るのに役立つかもしれません。

https://medium.com/@MarkEwersDev/note-to-self-if-you-ever-get-this-uncaught-referenceerror-webpackjsonp-is-not-defined-message-and-d354f5c4d335#.9cysuil5phttps://github.com/webpack/webpack/issues/368を読んだことがありますが、私は何か不足していない限りどちらも役に立ちません。

devtool: 'source-map', 
    entry: { 
    vendor: [ 
     'react', 'react-dom', 'react-router', 'react-helmet', 'react-redux', 'moment-timezone', 'cookies-js', 'superagent', 'classnames', 'es6-promise' 
    ], 
    app: [ 
     './src/client/entry', 
     './scss/main.scss', 

    ] 
    } 
    output:{ 
    path: __dirname + '../../dist/js', 
    filename: 'app.js' 
    } 
    plugins:[ 
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'), 

    new ExtractTextPlugin('../css/app.css', { 
     allChunks: true 
    }), 
    new webpack.DefinePlugin({ 
     'process.env':{ 
     'NODE_ENV': JSON.stringify('production') 
     } 
    }), 
    new webpack.optimize.AggressiveMergingPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: true 
     }, 
     output: { 
     comments: false 
     } 
    }), 
    ...persistentPlugins 
    ], 

答えて

11

webpackJsonp機能はコモンズチャンクによって定義されているので、<script>タグを書くとき、あなたは常に最初に(あなたのケースでvendor.js)コモンズチャンクを置く必要があります。 <script async>も使用できません。

output.filenameを定数文字列に設定すると、ベンダーチャンクがエントリチャンクによって上書きされる可能性があります。 app.jsの代わりに​​としてください。

+1

私は間違った順序でスクリプトを読み込んでいたようです。これでwebpackJsonpエラーが修正されました。 私のヘッダーだけがロードされていますが、私のコンソールやサーバーのログには何のエラーもありません。 – Stretch0

+0

polyfills.js、vendor.js、app.jsをロードする必要があります – klonq

0

私は本番環境で同じ問題に直面しています。私は理由はわかりませんが、バンドル+ベンダだけをアップロードして、プロダクションwebpack設定でビルドした場合、同じエラーが発生します。このエラーを解決して、ノードアプリケーションを再起動しました。しかし、私はそれが良いアプローチではないことを知っています。

私はウェブパックのプロダクション設定であなたとまったく同じプラグインを使用していますが、理由はウェブパック最適化プラグインの1つであると確信しています。

私の提案は次のとおりです。 が問題の原因となっている1(AggressiveMergingPluginDedupePluginUglifyJsPlugin)、そしてあなたが見つけるかもしれないものを最適化プラグインの一つ一つをコメントにしてください。

現時点では私のプロダクション環境で発生するため、今はテストできません。この時点では停止/テストできません。しかし、それがあなたのために働く場合、私に知らせてください:)

+0

私は上記のマークされた答えで問題を解決することができました – Stretch0