CRA 和捆绑加载器

Question

我正在尝试在我的create-react-app 应用程序中使用react-router 和code splitting。

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

这行给我一个错误：

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

我认为这是因为一些 es-lint 设置。如何禁用它以便我可以在我的 CRA 应用程序中使用 webpack bundle-loader？

Answer 1

我设法解决了这个问题。 我所做的是：

1. 通过运行npm run eject 弹出creact-react-app

2. 修改package.json 文件，将rules 键添加到eslintConfig，如下所示：

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

3. 按照docs 中的说明设置组件。

希望这对某人有所帮助，因为我在许多论坛中都没有找到正确的答案！

顺便说一句，对带有动态导入的代码拆分的支持应该很快就会来到CRA！