webpack学习笔记之代码分割和按需加载的实例详解

window.onload=function(){
     var _cs=require('./index.css');
     var $=require('jquery');

     $('#_click').on('click',function(){
       require.ensure([],function(require){
         var _click=require('./_clickWindow.js');
         if(!_clickEvent){
           console.log(_click);
           var _clickEvent=_click._clicks;
         }
         new _clickEvent();
       },'cli')
     });
};

var _cs=require('./index.css');

require.ensure([], function(require){
  var list = require('./list');
  list.show();
});

require.ensure([], function(require){
  var list = require('./list');
  list.show();
}, 'list');

require.ensure([], function(require){
  var list = require('./list');
  list.show();
  var edit = require('./edit');
  edit.display();
}, 'list_and_edit');

require.ensure([‘./a.js'], function(require){
  var list = require('./list');
  list.show();
});

require.ensure([‘./a.js'], function(require){
  var b = require('./b');
  b.show();
});

require.ensure([‘./a.js'], function(require){
  var list = require('./list');
  list.show();
}，'list-b');

require.ensure([‘./a.js'], function(require){
  var b = require('./b');
  b.show();
}，'list-b');

(function(){
  var _html=require('./_clickHtml.html');
  var $=require('jquery');

  function ClickWindow(){
   this.div=$('body').append(_html);
   $('#_tip').append('<img src="/UploadFiles/2021-04-02/timg.jpg">

引入写好的html同上需要下载html-loader
3.配置文件


var path=require('path');
module.exports={
 entry:__dirname+'/index.js',
 output:{
   path: __dirname,
   filename:'[name]bundle.js',
   chunkFilename:'[name]chunk.js'
 },
  module: {
      loaders: [  //加载器
       {test: /\.css$/, loader: "style!css" },
       {test: /\.html$/, loader: "html" },
       {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
      ]
  }
};



filename:'[name]bundle.js',
[name]指向入口文件的name
chunkFilename:'[name]chunk.js'
[name]指向require.ensure定义的第三个参数


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。