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 routes觸發動態代碼加載就好了。 但/ gsgs / go會觸發404

bundle.js：2動態頁面加載失敗錯誤：加載塊0失敗。（...）

我究竟做錯了什么？ 我正在使用

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

Answer 1

我試圖在博客文章中重現這個問題，似乎有些不對勁。 我試圖修復它，我不能再看到那個錯誤了。

您可以參考此提交 ，該提交針對當前主服務器進行了更改，並且我能夠動態加載子路由。

如果您再次遇到問題，請告訴我。 如果你有可以重現問題的樣品回購，那將是很好的，我很樂意調試。

樂於幫助。

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: 'http://0.0.0.0:8000/' publicPath: '/'到publicPath: '/' 。