1.公共模塊的抽離（單頁面沒有必要，一般是多頁面的）
我們在src下創(chuàng)建四個js。分別是a.js,b.js,index.js, home.js;
a.js
console.log('a.js')
b.js
console.log('b.js')
index.js
import './a.js'
import './b.js'
console.log('index.js')
home.js
import './a.js'
import './b.js'
console.log('home.js')
然后既然是多頁面，那我們webpack.config.js中的entry入口，就要配置了
let path = require('path')
module.exports = {
mode: 'production', // production development
entry: {// 配置多入口
home: './src/index.js',
index: './src/index.js',
},
output: {
filename: '[name].js', // 打包出對應的名字
path: path.resolve(__dirname, 'dist')
},
devServer: {
port: 1234,
open: true,
contentBase: './dist'
},
module:{
rules:[]
},
plugins: [],
}
然后運行打包可以看到打包后的文件里面都會出現(xiàn)a.js b.js
image.png
- 說明沒有抽離出來。
現(xiàn)在我們就需要配置優(yōu)化項 optimization了，前面我們配置過壓縮也是在這里
// 優(yōu)化
optimization:{
splitChunks:{ // 代碼塊分割
cacheGroups:{ // 緩存組
common:{ // 公共模塊
chunks: 'initial', //剛開始就需要抽離
minSize: 0 , // 多大的會被抽離
minChunks: 2, //重復2次以上會被抽離
}
}
}
},
打包后可以看到公共模塊被抽離出來了
image.png
- 現(xiàn)在我們看一下下一個點， 我們在index.js 和home.js中再引入一下jquery，并打印
import $ from 'jquery';
console.log($)
然后我們打包
image.png
雖然也抽離了，但第三方模塊我們需要單獨抽離出來。我們就在加一項，比如叫verdor
let path = require('path')
module.exports = {
mode: 'production',
entry: {// 配置多入口
home: './src/index.js',
index: './src/index.js',
},
// 優(yōu)化
optimization:{
splitChunks:{ // 代碼塊分割
cacheGroups:{ // 緩存組
common:{ // 公共模塊
chunks: 'initial', //剛開始就需要抽離
minSize: 0 , // 多大的會被抽離
minChunks: 2, //重復2次以上會被抽離
},
vendor:{
priority: 1, // 優(yōu)先級 先抽離node_modules 之后再抽離common。不然jquery 也會被抽離到common中
test: /node_modules/, // 匹配到才抽離
chunks: 'initial',
minSize: 0,
minChunks: 2
}
}
}
},
output: {
filename: '[name].js', // 打包出對應的名字
path: path.resolve(__dirname, 'dist')
}
}
運行打包可以看到jquery被單獨抽離出來了
image.png
- 懶加載（vue react 懶加載的原理）
我們在src先創(chuàng)建home.js 和index.js
home.js
module.exports = 'home.js'
index.js 創(chuàng)建button按鈕，點擊的時候才加載home.js
var button = document.createElement('button');
button.innerText = '按鈕';
button.addEventListener('click', function(){
console.log('click')
import('./home.js').then(function(data){
console.log('hhhhhh', data)
})
})
document.body.append(button)
webpack.config.js
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', // production development
entry: {
index: './src/index.js',
},
output: {
filename: '[name].js', // 打包出對應的名字
path: path.resolve(__dirname, 'dist')
},
devServer: {
port: 1234,
open: true,
contentBase: './dist'
},
module:{
rules:[]
},
plugins: [
new HtmlWebpackPlugin({
template:'./index.html'
})
],
}
啟動服務
沒點擊前，只加載了index.js
image.png
控制臺沒有打印東西
image.png
點擊按鈕之后控制臺打印了home.js的對象
image.png
網(wǎng)絡也看到加載了0.js。（就是home.js的內(nèi)容）
image.png
- 我們開發(fā)啟動服務時，每次改東西，頁面都會刷新，我們?nèi)绻灰⑿?，那就需要配置熱更新了?br>
devServer中配置hot: true;
plugins 里面配置
new webpack.NamedModulesPlugin(), // 打印更新的模塊路徑
new webpack.HotModuleReplacementPlugin() // 熱更新插件
webpack.config.js
let path = require('path')
let webpack = require('webpack')
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', // production development
entry: {
index: './src/index.js',
},
output: {
filename: '[name].js', // 打包出對應的名字
path: path.resolve(__dirname, 'dist')
},
devServer: {
hot: true,
port: 1234,
open: true,
contentBase: './dist'
},
module:{
rules:[]
},
plugins: [
new HtmlWebpackPlugin({
template:'./index.html'
}),
new webpack.NamedModulesPlugin(), // 打印更新的模塊路徑
new webpack.HotModuleReplacementPlugin() // 熱更新插件
],
}
然后我們在index.js 和home.js中寫代碼
home.js
module.exports = 'home.js'
index.js
import str from './home.js'
console.log(str)
// 如果支持熱更新, 接受home.js，更新之后重新引入home.js
if(module.hot){
module.hot.accept('./home.js', function(){
console.log('文件更新了')
var str = require('./home.js');
console.log(str)
})
}
啟動服務，控制臺打印
image.png
然后我們改變home.js
會看到控制臺發(fā)生了改名，指向了改變的模塊，并且頁面也沒有刷新
image.png
