React Js 动态路由代码拆分

Question

我有这样的路由器设置

<Router path="/" component={Application}>
 <Route path="/login" getComponent={(location, cb)=>{

      require.ensure([], function (require) {
                        cb(null, require('./components/Login').default);
                      });
}} />

 <Route path="/article/:articleid" getComponent={(location,cb)=>{
     require.ensure([], function (require) {
                        cb(null, require('./components/Article').default);
                      });
}}


</Router>

现在，主页 / 加载，/login 页面在 /0.chunk.js 加载所需的块，但 /article/some-article 页面尝试从 /article/1.chunk.js 加载所需的块 1.chunk.js，但未找到。

Webpack 在一个位置 /0.chunk.js 和 /1.chunk.js 生成所有块。有人可以帮助为什么/article/:articleid 在位置/article/ 而不是/ 寻找块以及如何纠正这个问题。 ?

Answer 1

听起来您遇到了相对路径问题。您应该确保output.publicPath 正在生成绝对路径。

module.exports = {
  output: {
    chunkFilename: '[id].chunk.js',
    publicPath: '/'
  }
}