Webpack 2の移行によりES6モジュールのインポートが中断される

Question

最近Reactアプリケーションでwebpack 2にアップグレードしました。それは、バージョンナンバーだけを変えない限り、まっすぐに機能しました！すばらしいです。

しかし、今は私のES6モジュールをバンドルして（インポート、エクスポートなど）、babelとwebpackがうまくいっていないようです。

私はこれを実現しようと作った唯一の変更は、ここから私の.babelrcを変更することです。これに

{ 
    "presets": ["es2015", "stage-1", "react"], 
    "plugins": ["transform-object-rest-spread"], 
} 

：

{ 
    "presets": [["es2015", {"modules": false}], "stage-1", "react"], 
    "plugins": ["transform-object-rest-spread"], 
} 

のWebPACKはまだエラーをスローせずにこれをバンドルしかし、私がアプリを開くと、私は恐怖を感じる。"Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)."

あなたはimport { Component } from './component.js'はなくimport Component from './component.js'で別のコンポーネントのデフォルトのエクスポートをインポートしようとすると、

スタックトレースは、私のアプリの最初の行に戻って私を取りますが、私はこのエラーを見ることができるものから、（ReactDOM.render(...）

は通常発生します。私はなぜ私のコードがそれを蒸散させるバベルと一緒に動作するのか知っているので、私はそれがなぜここに当てはまるのか理解できません。

ヒント？

Answer 1

["es2015", {"modules": false}]のように思われ、エラーの原因となっていました。

私のbabelrcをそのまま残して、Webpackの設定に次のプラグインを追加することで、目的の動作を得るように管理しました：new webpack.optimize.CommonsChunkPlugin({...})とnew HtmlWebpackPlugin({...})。

はまた、あなたが別途ベンダーのモジュールをバンドルすることができますし、あなたのreact-routerルートに基づいてチャンクにコードを分割する方法を示しており、this great tutorialに応じていくつかの他の設定変更を行いました。