在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 使用require.ensure按需加載無效

使用require.ensure按需加載無效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="aBtn">A按鈕</div>
<div id="bBtn">B添加</div>

<script src="dist/index.min.js"></script>

</body>
</html>
import _ from 'lodash';

function component() {
    var element = document.createElement('div');

    // Lodash, currently included via a script, is required for this line to work
    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

document.getElementById("aBtn").onclick = function() {

    require.ensure([], function() {
        var awork = require('../js/first.js')

        //異步里面再導(dǎo)入同步模塊--實(shí)際是使用同步中的模塊
    })
}

document.getElementById("bBtn").onclick = function() {

    require.ensure([], function() {
        var bwork = require('../js/second.js')

    })
}

document.body.appendChild(component());

first.js

console.log('***** 我是第一名 *****');

second.js

console.log('***** 第二個(gè)開始 *****');

webpack.common.js

const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
    entry: {
        "index": "./src/index.js"
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        //filename: 'bundle.js'
        //filename: "[name].js"
        filename: "[name].min.js", // 對應(yīng)entry里面 生成出來的文件名
        chunkFilename: "[name].min.js" // 按需加載（異步）模塊時(shí)候，這時(shí)生成的文件名 以chunkname配置的

    },
    module: {

    },
    plugins: [

    ]
};

module.exports = config;

圖片描述
圖片描述

回答
編輯回答
膽怯

可以看這里，推薦使用下面的import方式。require.ensure是老式寫法。

function getComponent() {
  // 這個(gè)注釋是必要的，根據(jù)配置生成的chunk name是lodash.chunk.js，移除注釋會(huì)變成[id].chunk.js
  // 而且生成的chunk會(huì)在header標(biāo)簽中被引入
  return import(/* webpackChunkName: "lodash" */ 'lodash')
  .then(_ => {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack!'], ' ');
    return element;
  })
  .catch(error => 'An error occurred while loading the component');
}  
 

getComponent().then(element => {
  document.body.appendChild(element);
})
2017年8月10日 06:50