CRAとバンドルローダー

Question

私はアプリケーション内にとcode splittingを使用しようとしています。私はこれが理由の一部es-lint設定であると仮定し

Line 5: Unexpected '!' in 'bundle-loader?lazy!./Settings'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax 

：

import loadSettings from 'bundle-loader?lazy!./Settings'; 

この行は私のエラーを取得します。 CRAアプリケーションの中でwebpack bundle-loaderを使用できるように、どうすれば無効にできますか？

Answer 1

私は何とかこれを解決することができました。 私がやったことです：

1. ので、それはこのようになりますeslintConfigからrulesキーを追加してpackage.jsonファイルを変更しnpm run eject

2. を実行してcreact-react-appを取り出し：あなたの設定し

   "eslintConfig": { 
       "extends": "react-app", // This was already in the file 
       "rules": { 
        "import/no-webpack-loader-syntax": 0 
       } 
   } 
   

3. docsに記載されているような成分。

正解を見つけずに多くのフォーラムを掘り下げているので、これは誰かを助けてくれることでしょう。

動的インポートによるコード分割のサポートは、すぐにCRAになるはずです。

Answer 2

デフォルトのWebpack設定を取り出す、または変更することなく、create reactアプリでコード分割を実装できるようになりました。

レスポンススクリプトをwebpack2'swの動的インポートを実装するバージョン1.x（現行バージョン1.0.17）に更新すると、バンドルを複数のチャンクに分割してオンデマンドでロードできます。

ここでコードを分割する実装に関するビデオチュートリアルは、反応アプリの作成 - https://youtu.be/AR5GSZuox1kにあります。