webpack成神之路（十）
2019-05-29 本文已影响0人
AAA前端
1.公共模块的抽离（单页面没有必要，一般是多页面的）
我们在src下创建四个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: [],
}
然后运行打包可以看到打包后的文件里面都会出现a.js b.js
image.png
- 说明没有抽离出来。
现在我们就需要配置优化项 optimization了，前面我们配置过压缩也是在这里
// 优化
optimization:{
splitChunks:{ // 代码块分割
cacheGroups:{ // 缓存组
common:{ // 公共模块
chunks: 'initial', //刚开始就需要抽离
minSize: 0 , // 多大的会被抽离
minChunks: 2, //重复2次以上会被抽离
}
}
}
},
打包后可以看到公共模块被抽离出来了
image.png
- 现在我们看一下下一个点， 我们在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',
},
// 优化
optimization:{
splitChunks:{ // 代码块分割
cacheGroups:{ // 缓存组
common:{ // 公共模块
chunks: 'initial', //刚开始就需要抽离
minSize: 0 , // 多大的会被抽离
minChunks: 2, //重复2次以上会被抽离
},
vendor:{
priority: 1, // 优先级 先抽离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先创建home.js 和index.js
home.js
module.exports = 'home.js'
index.js 创建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
网络也看到加载了0.js。（就是home.js的内容）
image.png
- 我们开发启动服务时，每次改东西，页面都会刷新，我们如果不要刷新，那就需要配置热更新了。
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
会看到控制台发生了改名，指向了改变的模块，并且页面也没有刷新
image.png
