Reactjs 网页及；未生成React动态导入区块文件

我正在使用React@16.0.0及webpack@3.1.0构建仪表板模板并尝试从动态导入生成区块文件，但从未生成这些文件：（我可以渲染导入并渲染的组件，但似乎文件未生成，组件未动态导入

我所做的

• 将“语法动态导入”和“动态导入网页包”设置为babel插件
• 已将chunkFilename添加到网页包输出

我所期望的

• 基于路由动态导入生成区块文件

版本

• “反应”：“^16.0.0”
• “反应dom”：“^16.0.0”
• “反应路由器”：“^4.2.0”
• 反应路由器dom“^4.2.2”
• “babel插件动态导入网页包”：“^1.0.1”
• “babel插件语法动态导入”：“^6.18.0”
• “网页包”：“3.1.0”

这是我的

.babelrc

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ],
  "plugins": [
    "syntax-dynamic-import",
    "dynamic-import-webpack",
    "transform-export-extensions",
    "transform-class-properties",
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }],
    ["transform-object-rest-spread", {
      "useBuiltIns": true
    }]
  ]
}

这是

App.jsx

，我试图用仪表板1

const loadDashboard1 = import(/* webpackChunkName: "dashboard1" */ '../Dashboard1/index.jsx')

const Dashboard1 = (props) => <AsyncComponent lazyLoadComponent={loadDashboard1} props={props} /> 
const Dashboard = () => (
  <div>
    <Switch>
      <Route path="/dashboard/1" component={Dashboard1} /> //*** This should be dynamic imported and make chunk file
      <Route path="/dashboard/2" component={Dashboard2} />
      <Route path="/dashboard/3" component={Dashboard3} />
    </Switch>
  </div>
)


const App = () => (
  <div className={wrapper}>
    <HeaderMain />
    <Route path="/dashboard" component={SidebarLeft} />
    <main className={content}>
      <Switch>
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/" component={HomePage} />
      </Switch>
    </main>
  </div>
)

export default App

这里是

AsyncComponent

import React from 'react'

class AsyncComponent extends React.Component {

  state = {
    Component: null,
    isLoaded: false,
  }

  async componentWillMount() {
    const module = await this.props.lazyLoadComponent
    this.setState({
      Component: module.default ,
      isLoaded: true,
    })
  }

  render() {
    const { Component } = this.state
    return (
      <div>{this.state.isLoaded ? <Component /> : this.props.loader}</div>
    )
  }
}


export default AsyncComponent

如果您有任何想法来解决这个问题或需要进一步的信息，请让我知道

---

谢谢！

除了webpack 2+中不需要的动态导入webpack外，一切看起来都很完美。我猜您是在意外情况下将此组件导入其他地方的，因此该捆绑包没有创建：）

看到一个包含尝试和期望的可靠问题，令人耳目一新，值得称赞！我意外地从其他文件以静态方式导入了该组件，这导致该块文件没有生成。

import React from 'react'

class AsyncComponent extends React.Component {

  state = {
    Component: null,
    isLoaded: false,
  }

  async componentWillMount() {
    const module = await this.props.lazyLoadComponent
    this.setState({
      Component: module.default ,
      isLoaded: true,
    })
  }

  render() {
    const { Component } = this.state
    return (
      <div>{this.state.isLoaded ? <Component /> : this.props.loader}</div>
    )
  }
}


export default AsyncComponent

   main.5227b4d762a52f00aeb2.js     262 kB       0  [emitted]  [big]  main
    vendor.478de73b0c92dd129de6.js     116 kB       1  [emitted]         vendor
  main.5227b4d762a52f00aeb2.js.map    1.53 MB       0  [emitted]         main
vendor.478de73b0c92dd129de6.js.map     420 kB       1  [emitted]         vendor
                        index.html  297 bytes          [emitted]