참고용으로 예를 들어보겠습니다

html

비동기적으로 로드해야 하는 JS 파일plugin.js

webpack의 항목 컴파일 파일 Entry.js

클릭 시 mod1.js가 로드되어 헤드에 삽입되는 효과가 있지만 처음에는 로드되지 않습니다

마지막으로 webpack.config.js 구성에 대해 말씀드리겠습니다.

path + ChunkFilename은 require.ensurei 비동기 모듈에 의해 생성된 경로이지만 html 파일이 참조하는 경로는 아닙니다

실제 참조 경로는 publicPath + ChunkFilename입니다. 즉, html이 프로젝트 루트 디렉터리에 있는 경우 이 비동기 js 모듈을 참조하는 html의 경로는 ./dist/js/async/[name입니다. ].js이지만 HTML이 index/index.html과 같은 폴더에 있거나 위 경로를 참조할 수 없는 경우 publickPath를 '../dist/'로 변경하고 index 폴더 외부로 이동해야 합니다. 비동기 모듈을 찾으려면

최근에 비슷한 문제가 발생했는데 간단히 설명드리겠습니다.
webpack이 2로 업그레이드되면 두 번째 및 세 번째 크레딧 방법이 main.js에 직접 패키징되지 않습니다.
즉, 첫 번째 화면 로딩에 필요한 모듈의 경우 비동기 로딩 모드를 더 이상 사용할 수 없지만 요청 시 로드할 수 있습니다.
패키지 파일에서 확인할 수 있습니다. 첫 번째 방법을 제외하고는 테스트 방법이 js에 패키지되어 있지 않습니다.

두 번째, 세 번째 글쓰기 방법은 어떻게 하고 싶으신가요? AMD 또는 CMD 사양의 작성 방법을 시뮬레이션하시겠습니까?

가장 일반적인 모듈 사양은 ES6 모듈과 node.js의 commonJS 사양인데, 로딩 시간, 파일 참조 방법 등 구체적인 로딩 세부 사항에 차이가 있기 때문입니다. 하지만 webpack을 사용하는 목적은 서로 다른 사양을 통일하기 위한 것입니다. Webpack은 모든 모듈
을 미리 함께 패키지화하고 각각 ID를 부여한 후 ID별로 참조하므로 ES6 모듈과 CommonJS 사양 간에 차이가 없습니다. webpack 컴파일 후 AMD 및 CMD 사양과 동일합니다.

포스터가 webpack을 사용하여 CMD의 지연 로딩을 구현하려는 경우 이 아이디어는 잘못된 것입니다. 왜냐하면 어떤 로딩 방법에 관계없이 webpack이 수행하는 작업은 의존하는(또는 의존할) 모든 모듈을 하나로 패키지하는 것이기 때문입니다. file 을 사용하여 런타임 시 해당 패키지를 ID로 찾을 수 있도록 하여 사양 간의 차이를 약화시킵니다

귀하의 구체적인 환경은 모르겠습니다. 제 환경이 Webpack2 + React Router v4로 업그레이드되었습니다. https://reacttraining.cn/web/...

먼저 필요에 따라 필요한 모듈과 구성 요소 파일을 로드하기 위해 번들 구성 요소를 코딩하고 생성해야 합니다.

위 코드는 문서에서 복사한 것이며, 상태 초기화 방법을 수정하지 않은 경우에는 babel-plugin-transform-class-properties를 사용해야 합니다.babel-plugin-transform-class-properties.

使用的时候包含三个个步骤

• 导入Bundle模块

import React, { Component } from 'react'

class Bundle extends Component {
  constructor(props){
    super(props)
    this.state = {
      mod: null
    }
  }
  componentWillMount() {
    this.load(this.props)
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps)
    }
  }
  load(props) {
    this.setState({
      mod: null
    })
    props.load((mod) => {
      this.setState({
        // handle both es imports and cjs
        mod: mod.default ? mod.default : mod
      })
    })
  }
  render() {
    return this.props.children(this.state.mod)
  }
}

export default Bundle

• 异步加载

import Bundle from './bundle.js';

• 初始化

import loadHome  from 'bundle-loader?lazy!./components/Home';

当然, 你还需要配置你的 .babelrc 和 webpack.config.js, 下面我给我我自己的, 你可以研究一下.

webpack.config.js

const Home = ({...props}) => (
  <Bundle load={loadHome}>
    {(Component) => Component? <Component {...props}/>: <p>Loading...</p>}
  </Bundle>
)

.babelrc

  module: {
    rules: [
      // Javascript模块加载器
      {
        test: /\.js|jsx$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory : true,
            presets: [
              ['es2015', {modules: false}]
            ],
            plugins: [
              'syntax-dynamic-import',
              'transform-async-to-generator',
              'transform-regenerator',
              'transform-runtime'
            ]
          }
        }
      },
      ...
    ]

还有公共块输出插件的配置

{
  "presets": [
    "es2017",
    [
      "latest",
      {"es2015":{"modules": false}}
    ],
    "stage-0",
    "react"
  ],
  "plugins": [
    ["import",{"libraryName": "antd","style": true }],
    "react-hot-loader/babel"
  ]
}

通过上述N个步骤后, 组件Home

• 🎜번들 모듈 가져오기🎜

• 🎜비동기 로딩🎜

• 🎜초기화🎜