懒加载 lazy loading

用到的时候才加载
vue 首屏不加载
index.js

const oBtn = document.getElementById('j-button')
oBtn.onclick = async function () {const div = await createElement()document.body.appendChild(div)
}
async function createElement() {const { default: _ } = await import(/* webpackChunkName: "my-loadsh" */ 'lodash')const res = _.join([1, 2, 3], '*')const div = document.createElement('div')div.innerText = resreturn div
}

支持async await语法
webpack.base.js配置options

// cnpm install --save-dev @babel/plugin-transform-runtime
{test: /\.js$/,use: {loader: 'babel-loader',options: {plugins: ["@babel/plugin-transform-runtime"]}},exclude: path.resolve(__dirname, 'node_modules')
},

点击按钮前
点击按钮

module chunk bundle

多个入口 → 生成多个chunk
异步引入import 生成chunk
splitChunk也能生成chunk
bundle：dist中的文件

如何找到webpack对应的loader版本

"devDependencies": {"@babel/cli": "^7.14.8","@babel/core": "^7.15.0","@babel/plugin-transform-runtime": "^7.15.0","@babel/preset-env": "^7.15.0","babel-loader": "^8.2.2","clean-webpack-plugin": "^4.0.0-alpha.0","core-js": "^3.8.3","css-loader": "^3.5.0","html-webpack-plugin": "~3.2.0","lodash": "^4.17.21","style-loader": "^1.1.4","webpack": "~4.41.5","webpack-cli": "~3.3.10","webpack-dev-server": "~3.10.1","webpack-merge": "^5.8.0"}

CSS代码分割

css in JS

style-loader会将css代码放入style标签
index.css

body {background: orange;
}

index.js

import './index.css';
...

编译后没有.css文件，而是在main.js中

使用MiniCssExtractPlugin分离css和JS

https://webpack.docschina.org/plugins/mini-css-extract-plugin/

安装"mini-css-extract-plugin"
在生产环境使用
webpack.prod.js
使用CssMinimizerPlugin压缩css

const { merge } = require('webpack-merge')
// 公共配置
const baseConfig = require('./webpack.base')
// 生产环境 js css分离
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 压缩
const CssMinimizerPlugin = require("CssMinimizerPlugin")
// 生产环境特有的配置
const prodConfig = {mode: 'production',devtool: 'cheap-module-source-map',// CSS JS分离plugins: [new MiniCssExtractPlugin()],optimization: {// 压缩minimize: true,minimizer: [new CssMinimizerPlugin()],// 提取所有的 CSS 到一个文件中 会产生map映射文件splitChunks: {cacheGroups: {styles: {name: "styles",test: /\.css$/,chunks: "all",enforce: true,},},},},module: {rules: [{test: /\.css$/i,// CSS JS分离use: [MiniCssExtractPlugin.loader, "css-loader"],},],},
};module.exports = merge(baseConfig, prodConfig)

package.json

// 忽略对css文件的tree shaking
"sideEffects": ["*.css"],

csdn效果

提取所有的 CSS 到一个文件中
基于入口提取 CSS

浏览器缓存（生产环境）

浏览器开启缓存后：不会拿最新的index.js文件
解决：使用hash
根据文件内容生成hash值
webpack.prod.js

const path = require("path");
const { merge } = require('webpack-merge')
// 公共配置
const baseConfig = require('./webpack.base')
// 生产环境特有的配置
const prodConfig = {mode: 'production',devtool: 'none',output: {// 文件内容带哈希值filename: '[contenthash].bundle.js',path: path.resolve(__dirname, "../dist"),},
};module.exports = merge(baseConfig, prodConfig)

限制位数filename: '[name].[contenthash:8].js',

Shimming

比如第三方库使用了Jquery，但又没有引入，也不便于修改第三方库的源代码，就需要使用。官方案例如下：
https://webpack.docschina.org/guides/shimming/#root

webpack5

版本查询
npm info webpack version(当前版本)
npm info webpack versions(历史版本)

webpack5

对被不同文件引入的string.js，在webpack中配置
string.js会被分割，打包到common.js

optimization:{splitChunks:{chunks: 'all',minSize: 0,cacheGroups: {vendors:{// 对第三方库的打包 如lodashtest: /[\\/]node_modules[\\/]/,priority: -10,        filename: 'vnedors.js',minChunks: 1}          default:{filename: 'common.js',priority: -20, minChunks: 2}}}
}

webpack打包后会自动生成一些箭头函数，可以这样配置来关闭

output:{environment:{arrowFunction: false}
}

Webpack进阶（三）相关推荐

JavaScript进阶(三)
JavaScript进阶(三) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1Kt411w ...
QIIME2进阶三_用QIIME2实现对数据的质量控制
本文主要介绍了使用生物信息软件QIIME2中的DADA2与Deblur插件对扩增子基因序列进行质量控制. 本教程将使用来自人源化(humanized)小鼠的一组粪便样品,展示16S rRNA基因扩增子 ...
webpack大全---------(基础配置篇)----4.webpack实例三
上一篇:webpack大全---------(基础配置篇)----2.webpack实例二 webpack实例三:讲述代码效验模块eslint.引入第三方模块的处理.图片的打包处理. 第一步:安装配置 ...
学习PS课堂重点笔记（4.色彩调整和选区进阶二，5.选区进阶三）
4.1色彩调整基础一.明暗和色彩调整是相互联系的必须作为一个整体来看待. 二.重要的色彩调整命令图像菜单>>调整, 按菜单顺序: 1.自然饱和度 2.色相/饱和度 3.色彩平衡 4.黑 ...
3.0 Jmeter应用进阶三--利用Jmeter进行web性能测试(一)
3.0 Jmeter应用进阶三--利用Jmeter进行web性能测试 1. Jmeter 使用Http代理录制脚本或者自己写取样器(例如Http请求)(一) 2. Jmeter优化脚本(二) 3. ...
跨平台应用开发进阶(三十八)uni-app前端监控方案：基调听云APP探究
文章目录一.前言二.产品介绍 2.1 工作原理 2.1.1 Android平台工作原理 2.1.2 iOS平台工作原理三.项目集成 3.1 Android集成 3.2 iOS集成四.答疑解惑 ...
webpack进阶之插件篇
上一篇博客讲解了webpack环境的基本,这一篇讲解一些更深入的内容和开发技巧.基本环境搭建就不展开讲了一.插件篇 1. 自动补全css3前缀 autoprefixer 官方是这样说的:Parse ...
webpack:进阶用法（一）
一.PostCSS插件自动补齐CSS3前缀 1.1 背景 CSS3属性为什么有前缀?因为浏览器标准没有统一. 比如下面,写起来很慢,低效,麻烦. .box {-moz-border-radius: 1 ...
跨平台应用开发进阶(三十)：uni-app 实现集成火山视频直播服务
文章目录一.前言二.技术实现 2.1 web-view组件在app中的窗体关系和plus.webview操作方式三.双向通信 3.1 uni-app与内嵌网页通信 3.2 内嵌网页向uni-ap ...

Webpack进阶（三）

懒加载 lazy loading

module chunk bundle

如何找到webpack对应的loader版本

CSS代码分割

css in JS

使用MiniCssExtractPlugin分离css和JS

浏览器缓存（生产环境）

Shimming

webpack5

webpack5

Webpack进阶（三）相关推荐

最新文章

热门文章