javascript - ReactJs动态路由代码分割

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 处所需的 block ，但是 /article/some-article 页面尝试从未找到的 /article/1.chunk.js 加载所需的 block 1.chunk.js。

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

Answer 1

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

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