为什么Webpack代码拆分对我不起作用?

问题描述

我正在使用require.ensure在反应路由器路径上创建分割点.但是，我的构建目录除了vendor.js之外仍然只具有app.js.我期望使用require.ensure的每个路径都有一个单独的js文件.

I'm using require.ensure to create split points at react-router paths. However, my build directory still only has app.js in addition to the vendor.js. I was expecting a separate js file for each path I used require.ensure.

我在每个路径上都这样使用require.ensure:

I used require.ensure at each path like this:

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

我用于构建的Web Pack配置输出如下:

my web pack config output for build looks like this:

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

以下是我的路由文件和我的 webpack配置文件.

更新:我发现自己做错了.我的容器项目结构如下:

UPDATE: I figured out what I was doing wrong. My project structure for containers is like so:

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

问题:我仍在按以下方式在路由文件中导出所需的容器:从'./containerB/containerB'导出containerB删除index.js中的导出并直接从containerB.js中完成就可以了.

The issue: I was still exporting the containers I was requiring in routes file like so: export containerB from './containerB/containerB'Removing the export in the index.js and requiring straight from the containerB.js did the trick.

推荐答案

确保采用您想要的模块参数数组.您需要为阵列提供要动态加载的模块名称.在您的情况下，请提供"containers/Authenticate/AuthenticateContainer.js"以确保如下所示:

Ensure takes an argument array of modules you want to require. You need to supply the array with the module names you wish to dynamically load. In your case, provide 'containers/Authenticate/AuthenticateContainer.js' to ensure like this:

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

这篇关于为什么Webpack代码拆分对我不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！