javascript - Mengapa pemuatan atas permintaan webpack2 tidak berkuat kuasa?

Question

Saya baru mula berhubung dengan pembangunan modular bahagian hadapan. Saya menulis demo untuk mempelajari pek web pada dasarnya saya memahami fail konfigurasi dan proses operasi, tetapi pemuatan atas permintaan sentiasa gagal

Dalam fail entri, 3 kaedah digunakan untuk memuatkan:

import test from './index/test.js';  
            
// const test=(resolve) => require(['./index/test.js'], resolve)
        
// const test=resolve => { require.ensure(['./index/test.js'], () => { resolve(require('./index/test.js')) }) }
    
test.exe('显示测试文字');//执行

Kandungan test.js sangat mudah, cuma cetak untuk konsol:

const test={
    exe:function (res) {
        console.log('test方法的输出：'+res);
    }
};
export default test

Tiga kaedah telah diuji Hanya kaedah import langsung yang pertama berjalan seperti biasa.

Jika anda mengulas keluar
dan hanya memuatkan tetapi tidak melaksanakan, tiada ralat akan dilaporkan. test.exe('显示测试文字');Pemahaman saya ialah tidak ada yang salah dengan memuatkan kod, tetapi apabila ia perlu dimuatkan, ia tidak berjaya dimuatkan. Mengapa ini? Adakah saya menulis sesuatu yang salah di suatu tempat? Atau adakah saya perlu membuat konfigurasi tambahan kepada webpack.config.jx?

Answer 1

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

Answer 2

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.

Answer 3

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.

Jika poster ingin menggunakan webpack untuk melaksanakan pemuatan tertunda CMD, idea ini adalah salah, kerana tidak kira kaedah pemuatan mana pun, apa yang dilakukan oleh webpack adalah untuk membungkus semua modul yang anda bergantung pada (atau akan bergantung pada) ke dalam satu fail, supaya Pakej yang sepadan boleh ditemui oleh id semasa runtime, melemahkan perbezaan antara spesifikasi

Answer 4

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

Ada tiga langkah untuk digunakan🎜

• 🎜Import modul Bundle🎜

rrreee

• 🎜Pemuatan tak segerak🎜

rrreee

• 🎜Inisialisasi🎜

rrreee 🎜Sudah tentu, anda juga perlu mengkonfigurasi .babelrc dan webpack.config.js anda, saya akan berikan saya sendiri di bawah, anda boleh mempelajarinya.🎜 🎜webpack.config.js🎜 rrreee 🎜.babelrc🎜 rrreee 🎜Terdapat juga konfigurasi pemalam keluaran blok awam🎜 rrreee 🎜Selepas melepasi N langkah di atas, komponen Home boleh digunakan.🎜