Webpack 2 + React - 使用 System.import 拆分代码时的嵌套路由

Question

我有一个基于 http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/ 文章的应用程序。我添加了一些子路由，现在我的路由器配置如下：

function errorLoading(err) {
  console.error('Dynamic page loading failed', err);
}

function loadRoute(cb) {
  console.log('load route called');
  return (module) => cb(null, module.default);
}

const obj = {
  component: App,
  childRoutes: [
    {
      path: '/',
      getComponent(location, cb) {
        System.import('pages/Home')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
    {
      path: '/gsgs',
      getComponent(location, cb) {
        System.import('pages/Gsgs')
          .then(loadRoute(cb))
          .catch(errorLoading);
      },
      childRoutes: [
        {
          path: 'go',
          getComponent(location, cb) {
            System.import('pages/Gsgs/Home.js')
              .then(loadRoute(cb))
              .catch(errorLoading);
          },
        }
      ]
    },
    {
      path: '/about',
      getComponent(location, cb) {
        System.import('pages/About')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    },
  ]
};

/index、/about 和 /gsgs 路由触发动态代码加载就好了。但是 /gsgs/go 使用

触发 404

bundle.js:2 Dynamic page loading failed Error: Loading chunk 0 failed.(…)

我做错了什么？我正在使用

"webpack": "^2.1.0-beta.4",
"webpack-dev-server": "^2.0.0-beta"

Answer 1

我已尝试在博客 post 上重现该问题，但似乎出了点问题。我已尝试修复该问题，但我再也看不到该错误了。

你可以参考这个commit，它对当前的master有变化，我可以动态加载子路由。

如果您再次遇到问题，请告诉我。如果你有可以重现问题的示例 repo，那就太好了，我很乐意调试。

乐于助人。

Answer 2

检查您的配置文件（在我的例子中是 webpack.config.dev.js 文件）并检查 publicPath 并将其设置为 '/'。例如：publicPath: '/'。

你需要在output中这样设置

output: { path: __dirname, filename: 'app.js', publicPath: '/', /*publicPath: 'http://0.0.0.0:8000/',*/ }

我遇到了这个错误

   `http://0.0.0.0:8000/0.app.js
    Error: "Loading chunk 0 failed."`

并通过将 publicPath: 'http://0.0.0.0:8000/' 更改为 publicPath: '/' 来解决。

Webpack 2 + React - 使用 System.import 拆分代码时的嵌套路由

Webpack 2 + React - nested routes when code splitting with System.import

javascript

reactjs

webpack

react-router

webpack-dev-server