为什么webpack代码拆分对我不起作用？

Question

我正在使用require.ensure在react-router路径创建分裂点.然而,我的build目录仍只具有app.js除vendor.js.我期待我使用的每个路径都有一个单独的js文件require.ensure.

我require.ensure在每条路径上使用过这样的:

<Route path= 'auth' getComponent={(nextState, callback) => {
  require.ensure([], (require) => {
    callback(null, require('containers/Authenticate/AuthenticateContainer.js').default)
  }, 'auth')
}}/>

我的构建的web包配置输出如下所示:

output: {
  path: PATHS.build,
  filename: '/[name].[chunkhash].js',
  chunkFilename: '/[chunkhash].js'
}

以下是我的路径文件和我的webpack配置文件的全部内容.

更新: 我弄清楚我做错了什么.我的容器项目结构如下:

-app
 -containers
   -containerA.
     -containerA.js
   -containerB
     -containerB.js
   -containerC
     -containerC.js
   -index.js

问题:我仍然在路由文件中导出我需要的容器,如下所示:从'./containerB/containerB'导出containerB'删除index.js中的导出并直接从containerB.js中执行操作.

Answer 1

Ensure 接受您想要的模块的参数数组。您需要为数组提供您希望动态加载的模块名称。在您的情况下，提供“containers/Authenticate/AuthenticateContainer.js”以确保如下所示：

require.ensure(['containers/Authenticate/AuthenticateContainer.js'], (require) => {
      callback(null, require('containers/Authenticate/AuthenticateContainer.js').default)
    }, 'auth');