https://github.com/wudiufo/WebPack4-study https://blog.csdn.net/qq_40036736/article/details/93777396

webpack

image.png
image.png
image.png

image.png

image.png

image.png

图片

image.png

占位符 placeholder
image.png

CSS

image.png
image.png

image.png

image.png

image.png

image.png

image.png

css module

image.png
image.png

webpack 打包字体文件

image.png

image.png
image.png
image.png
image.png

CSS 文件的代码分割

企业微信截图_73c6df64-e3b6-4a47-86a5-83a5ca97af8e.png

压缩 CSS

企业微信截图_10708ea1-8308-430a-95e5-0991de1aeed0.png
Entry 和 Output 的配置
image.png
cdn
image.png

sourcemap 原理

image.png

监听文件变化

企业微信截图_4bb5ebb4-1cbf-4fbc-a50d-86ea1b86ed0b.png
企业微信截图_62d62435-3317-4ba4-8753-e807ca9105cb.png
企业微信截图_76cceb09-169d-4150-b385-2ad08a973a42.png

企业微信截图_dd1de1f0-a701-4bd1-80e0-f3fbd6d55046.png

Hot Module Repalcement(HMR)

image.png
image.png

image.png

使用 Babel 处理 ES6 语法

image.png
image.png
image.png
image.png

如果写的是业务代码，只需要配置preset 同时引入 polyfill。会污染全局环境
如果是库项目的代码，需要引入 plugin-transform-runtime 。 不存在全局污染的这么一个情况。
image.png

image.png

image.png

TreeShaking 只支持 ES Module

image.png

image.png

Code Spliting

image.png

image.png

image.png

image.png

打包分析， preloading ，prefetching

image.png
image.png

webpack/analyse

image.png
image.png

代码的使用率查看方式

cmd+shift-p
coverage

webpack 与浏览器缓存

image.png

image.png

Shimming

image.png

如何让模块的变量指向window

image.png

环境变量

image.png
image.png

image.png

Library 的打包

image.png
image.png
library : script 引入的情况下，全局添加变量
libraryTarget: 哪些模块可以使用

PWA 的配置 （progress web application）

image.png

Typescript 的打包配置

多页面打包配置

image.png
image.png

开发 loader

image.png

image.png

image.png
image.png

node 调试工具

Tips:多写异步代码