Beri anda contoh untuk rujukan

html

<input class="btn" type="button" name="" value="load">

Pemalam fail js.js yang perlu dimuatkan secara tidak segerak

export default function Mod(name) {
  this.name = name;
}
Mod.prototype.hi = function() {
  console.log('Hi~ ' + this.name);
};

masukan fail kompilasi entri webpack.js

let demo = false;

let btn = document.querySelector('.btn');
btn.addEventListener('click', function() {//1、点击按钮btn时
   require.ensure([], function(require) {
      let mod = require('./bundles/plugin.js').default;//2、异步栽入plugin.js
      if (!demo) {
         demo = new mod('jackson'); //3、创建新实例并禁止多次重复创建
      }
      demo.hi();//4、触发该实例的方法
   }, 'mod1');//5、生成一个名字为mod1.js的异步chunk模块
});

Kesannya ialah mod1.js dimuatkan dan dimasukkan ke dalam kepala apabila diklik, tetapi ia tidak dimuatkan pada mulanya

Akhir sekali, mengenai konfigurasi webpack.config.js.

   output: {
      path: path.resolve(__dirname, './dist'),
      filename: 'js/[name].js',
      publicPath: './dist/', 
      chunkFilename: 'js/async/[name].js'
      }

path + chunkFilename ialah laluan yang dijana oleh modul async require.ensurei, tetapi ini bukan laluan yang fail html merujuk kepadanya

Laluan rujukan sebenar ialah publicPath + chunkFilename, iaitu, jika html berada dalam direktori akar projek, maka laluan di mana html merujuk kepada modul js tak segerak ini ialah: ./dist/js/async/[name] .js, tetapi jika html anda Dalam folder, seperti index/index.html, atau laluan di atas tidak boleh dirujuk, anda perlu menukar publickPath kepada: '../dist/' dan pergi ke luar folder indeks untuk mencari modul tak segerak ini

Saya telah menghadapi masalah yang sama baru-baru ini, izinkan saya menerangkannya secara ringkas.
Apabila webpack dinaik taraf kepada 2, kaedah kredit kedua dan ketiga anda tidak dibungkus terus ke main.js.
Maksudnya, untuk modul yang diperlukan untuk pemuatan skrin pertama, mod pemuatan tak segerak tidak boleh digunakan lagi, tetapi boleh dimuatkan atas permintaan.
Anda boleh melihat dalam fail yang dibungkus Kecuali kaedah pertama, kaedah ujian anda belum dibungkus ke dalam js anda.

Apa yang anda mahu lakukan dengan kaedah penulisan kedua dan ketiga? Adakah anda ingin mensimulasikan kaedah penulisan spesifikasi AMD atau CMD?

Spesifikasi modul yang paling biasa ialah modul ES6 dan spesifikasi commonJS node.js, kerana terdapat perbezaan dalam butiran pemuatan tertentu, seperti masa pemuatan dan cara rujukan fail yang berbeza. Tetapi tujuan menggunakan webpack adalah untuk menyatukan spesifikasi yang berbeza Webpack akan membungkus semua modul bersama-sama terlebih dahulu, masing-masing memberi mereka id, dan merujuknya dengan id, supaya tiada perbezaan antara modul ES6 dan spesifikasi CommonJS selepas webpack disusun yang sama berlaku untuk spesifikasi AMD dan CMD.

Saya tidak tahu persekitaran khusus anda Persekitaran saya sendiri telah dinaik taraf kepada Webpack2 + React Router v4 Anda boleh merujuk kepada dokumen: https://reacttraining.cn/web/...

Mula-mula anda perlu mengekod dan mencipta komponen Bundle untuk memuatkan modul dan fail komponen yang diperlukan atas permintaan.

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

Kod di atas disalin daripada dokumen dan kaedah permulaan keadaan diubah suai Jika anda tidak mengubah suai kaedah permulaan keadaan, anda perlu menggunakan babel-plugin-transform-class-properties.babel-plugin-transform-class-properties.

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

• 导入Bundle模块

import Bundle from './bundle.js';

• 异步加载

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

• 初始化

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

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

webpack.config.js

  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'
            ]
          }
        }
      },
      ...
    ]

.babelrc

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

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

  plugins: [
    ...
    new webpack.optimize.CommonsChunkPlugin({
      name: ["vendor", "manifest"],
      filename: '[name].[hash].js',
      minChunks: 2
    }),
    ...
  ]

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

• 🎜Import modul Bundle🎜

• 🎜Pemuatan tak segerak🎜

• 🎜Inisialisasi🎜