首页
沸点
课程
数据标注
HOT
AI Coding
更多
直播
活动
APP
插件
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
webpack学习
创建于2021-08-14
订阅专栏
webpack小白
暂无订阅
共23篇文章
创建于2021-08-14
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
webpack 启动
启动: npm scripts 运行 webpack 开发环境: npm run dev 生产环境: npm run build 通过 webpack 直接运行 webpack entry.js 怎么
多进程/多实例构建:资源并行解析可选方案
HappyPack 已经不再维护,推荐使用 thread-loader HappyPack 已经不再维护,推荐使用 thread-loader
体积分析
可以分析哪些问题: 依赖的第三方模块文件大小 业务里面的组件代码大小 npm run build 后自动 8888 端口展示。分析出来后可以处理一下。比如通过 cdn 引入等。
构建配置
构建配置抽离成 npm 包: 意义: 通用性: 业务开发者无需关注构建配置 统一团队构建脚本 可维护性 构建配置合理的拆分 README 文档、ChangeLog 文档 质量 冒烟测试、单元测试、测试
构建异常,中断构建
判断构建是否成功 在 CI/CD 的 pipline 或者发布系统需要知道的当前构建状态 每次构建完成后输入 echo $? 获取错误码 捕获报错 通过错误码显示错误 主动捕获并处理构建错误 comp
当前构建时的日志显示
展示一大堆日志,很多不需要开发者关注 统计信息 stats: 构建成功 展示一大堆日志,很多不需要开发者关注 统计信息 stats: 构建成功
服务端渲染 SSR
服务端渲染: HTML + CSS +JS +Data => 渲染后的 HTML 服务端: 所有模板等资源都存储在服务器 内网机器拉取数据更快 一个 HTML 返回所有数据 浏览器和服务器交互流程 客
代码分割和动态 import
代码分割的意义 对于大的 web 应用来讲,将所有的代码都放在一个文件中是不够有效的,特别是当你的某些代码块是在某些特殊的时候才会被使用到。webpack 有一个功能就是将你的代码库分割成 chunc
Scope Hoisiting 使用和原理分析
现象:构建后的代码存在大量闭包代码 1.体积增大 2.运行代码时创建的函数作用域变多,内存开销变大 结论: 1.被 webpack 转换后的模块会带上一层包裹 2.import 会被转换为 __web
source map
eval: 使用 eval 包裹模块代码 source map:产生.map 文件 cheap:不包含列信息 inline:将 .map 作为 DataURI 嵌入,不单独生成 .map 文件 mou
多页面打包
原理:一个 entry 有一个 html-webpack-plugin 优化:动态获取 entry 和设置 html-webpack-plugin 数量,利用 glob.sync,动态获取 js 文件
css3 样式自动补齐前缀
postcss-loader autoprefixer 在某 less 文件中样式加 display: flex 配置 webpack.config.js 报错 处理 新建 postcss.confi
清除构建目录
clean-webpack-plugin 构建时自动删除之前构建好的目录。 clean-webpack-plugin 构建时自动删除之前构建好的目录。
代码压缩
js 文件压缩 webpack 内置 uglifyjs-webpack-plugin css 文件压缩 安装 optimize-css-assets-webpack-plugin,同时安装 cssna
文件指纹
作用:版本管理 Hash:和整个项目的构建有关,只要项目文件有修改,整个项目构建的 hash 值就会更改 Chunkhash:和 webpack 打包的 chunck 有关,不同的 entry 会生成
处理图片
file-loader url-loader 可以处理图片和字体,可以设置较小资源自动转换为 base64
loader 之样式加载
css-loader 用于加载 .css 文件,并且转换成 commonjs 对象 style-loader 将样式通过 <style> 标签插入 head 中 less-loader 在上述配置中加
mode
mode 用来指定当前的构建环境是: production|development|none 设置 mode 可以使用 webpack 内置的函数,默认值为 production
plugins
插件,用于 bundle 文件的优化,资源管理和环境变量注入作用于整个构建。插件,用于 bundle 文件的优化,资源管理和环境变量注入作用于整个构建。
Loaders
webpack 开箱即用,只支持 js 和 json 两种文件类型,通过 Loaders 去支持其他文件类型并且把它们转化为有效的模块,并且可以添加到依赖图中。 本身是一个函数,接受源文件作为参数,返
下一页