---恢復內容開始---
一、前言
1、webpack異步加載原理’
2、webpack.ensure原理
3、例子
二、主要內容
1、webpack異步加載原理’
webpack ensure有人稱他為異步加載，也有人稱為代碼切割，他其實就是將js模塊給獨立導出一個.js文件，然后使用這個模塊的時候，webpack會構造script dom元素，由瀏覽器異步請求這個js文件
2、webpack.ensure原理
就是把一些js模塊給獨立出一個個js文件，然后需要用到的時候，再創建一個script對象，加入到document.head對象中就可，瀏覽器會自動幫我們發起請求，去請求這個js文件，然后寫個回調函數，讓請求到的js文件做一些業務操作
3、例子
假設：main.js依賴三個js文件：
A.js是點擊aBtn按鈕后，才執行的邏輯
B.js是點擊bBtn按鈕后，才執行的邏輯
vue.js是封裝main.js時需要用到的包
（1）新建項目目錄如下：
（2）main.js如下，main.js依賴vue.js和兩個異步加載的A.js 和B.js
import Vue from 'vue' console.log(Vue) document.getElementById('aBtn').onclick=function(){ //異步加載A require.ensure([], function(){//當A.js需要依賴於B.js的時候，需要在[]中加入 var A = require('./A.js'); alert(A.data) }) } document.getElementById('bBtn').onclick=function(){ //異步加載b require.ensure([], function(){ var B = require('./B.js'); alert(B.data) }) }
（3）
A.js
var A = { "data":"hello A" } module.exports = A;
B.js
var B = { "data":"hello B" } module.exports = B;
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id='app'></div> <button id='aBtn'>aBtn</button> <button id='bBtn'>bBtn</button> </body> </html>
（4）config文件配置
下面inject:是將打包編譯的.js文件注入到你的index.html文件中，他有四個值：true(注入在body內底部) body(注入在body標簽下面，head 注入在head標簽下面
var path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const webpack = require('webpack'); const packagejson = require('./package.json') module.exports = { //入口 entry:{ "main":"./src/main.js", "util":Object.keys(packagejson.dependencies)//獲取生產環境依賴庫，抽離vue模塊 }, output:{ path:path.resolve('./dist'), filename:'[name].js' }, watch:true, plugins:[ new webpack.optimize.CommonsChunkPlugin({ name:'common',//這里任意取名,第二個輸出的是webpack運行時文件 filename:'[name].js' }), new HtmlWebpackPlugin({ chunks:['common','util','main'], //chunk主要用於多入口文件，會編譯生成多個打包文件，common一定前面， template:"./src/index.html", inject:true //inject是向index.html注入的位置，head body }) ] }
package.json
{ "name": "chunk", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack --config ./webpack.dev.config.js", "prod": "webpack --config ./webpack.prod.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "html-webpack-plugin": "^3.2.0", "webpack": "^2.6.1" }, "dependencies": { "vue": "^2.6.10" } }
（5）運行測試
運行之后發現多出一個dist文件夾，里面是打包后的文件，
一開始只加載
當點擊按鈕，才開始加載a.js和b.js
三、總結
---恢復內容結束---