Webpack 2 + React - 使用System.import

时间:2016-08-02 20:00:03

标签: javascript reactjs webpack react-router webpack-dev-server

我有一个基于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"

1 个答案:

答案 0 :(得分:0)

检查您的配置文件(在我的情况下为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: '/'来解决。