Please enable JavaScript.
Coggle requires JavaScript to display documents.
webpack, 需求:1.支持常见文件格式,2.支持热更新 3.支持懒加载 4.支持React,reacthook5 .ts -…
webpack
code-splite(SplitChunksPlugin)
防止重复
动态引入
入口起点
bundle解析
prefetch/preload
开发
sourceMap :star:
映射源代码
webpack-dev-server :star:
能够自动启动一个服务器
HMR :!:
webpack --watch
webpack-dev-middleware
正确安装
避免全局按安装
指定配置文件: Npx webpack —config webpackconfig.js
webpack-cli 用于在命令行中使用命令
懒加载?
可以只加载首页,其他页面根据路由的变化进行加载
代码分离,异步加载,不使用就不加载
loader
loader的作用
把不同格式的文件打包成就是文件
如何配置
.css(执行的顺序从下到上)
style-loader
css-loader
sass-loader
postcss-loader :question:
babel-loader
plugins
作用
类似生命周期,能够帮我们最一些事情,比如html-webpack-plugin可以在打包结束把js文件引入
常用插件
output
webpack analysis
分析打包的时间和依赖关系
tree-sharken
shimming 以polyfill为例
需求:1.支持常见文件格式,2.支持热更新
3.支持懒加载 4.支持React,reacthook5 .ts