首页
AI Coding
数据标注
NEW
沸点
课程
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
Webpack
哈哈哈哈多好听
创建于2022-09-11
订阅专栏
webpack webpack webpack!!!
暂无订阅
共39篇文章
创建于2022-09-11
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
哈希名解决客户端缓存问题
如果只是通过设置,重新缓存的间隔时间,是不好解决的: 设置时间过短----缓存带来的性能优化的效果就不明显了 设置时间过长----如果项目更新了,也不能及时缓存到最新的结果 此时,用哈希值给文件命名的
关于 css 文件【单独提取与压缩】
<1> css 文件的单独提取【MiniCssExtractPlugin】 注意: 如果 css 文件体积过小时,这样干反而会多此一举!!! 配置插件: 配置加载器: <2> css 文件的压缩【op
代码分割 Code Splitting
<1> Why need Code Spliting ? <2> Code Splitting 的两种方式: (1) 多入口打包 配置多入口、多出口: entry 多入口的配置,需要以对象的形式配置
生产化境下的优化 optimization
<1> 两种环境 开发环境 注重开发效率 生产环境 注重运行效率 不同环境配置下的 webpack 配置: ---- 两种方式 配置文件根据环境不同导出不同配置 一个环境对应一个配置文件 <2> 生产
HMR【模块热更新】
(1) 解决的问题: 自动刷新导致的页面状态丢失的问题。 (2) 使用方法: 在webpack.config.js中的配置 在 devServer 中开启 配置插件 ,该插件是 webpack 内置的
Source Map
使用方法: 直接在 webpack.config.js 文件中进行配置!!配置devtool属性即可!! 有许多种模式可以选择! 不同模式的大概不同之处: 比较推荐的方式: 开发模式下: 生产模式下:
webpack-dev-server实现自动编译and刷新
它实现了自动打包,并把打包后的文件部署到一个 http server【服务器】上 可以自动监听代码变化,代码变化会自动重新打包!!! 注意: webpack-dev-server 实现的打包并不会输出
自定义 plugin
注意: 类中需要有 apply() 方法 栗子: emit生命周期钩子 我们需要实现一个插件,用来清除打包生成的 js 文件中的注释!! 先分析适用的生命周期,因为是清除打包生成的 js 文件中的注释
常见插件[plugin]使用---clean、html、copy
一. clean-webpack-plugin 先引入: 再new调用使用: 二. html-webpack-plugin 1. 可以指定生成的 html 文件的头部标签内容 2. 可以自己创建一个
自定义 loader
注意: webpack 中对同一个资源可以依次使用多个 loader【管道概念】 <1> 开发一个转译 .md 类型资源的 loader 两种方法: 在该 loader 中直接完成 md --> ht
file-loader vs url-loader
(1) file-loader 但需要注意一点: 记得把图片资源的请求地址统一起来。需要进行相关配置如下: 原理如下 (2) url-loader dataUrl 的格式: 栗子: webpack内部
ES Module 的兼容性
<1> 浏览器环境 <2> node 环境 (1) 在node 环境使用 ES Module 直接在终端用 node --experimental-modules index.mjs 即可在 node
前端模块化的最佳实践 ES Module
一. ES Module ES Module的一些子规定: ES Module 默认采用严格模式,use strict ES Module 都是运行在单独的私有作用域中 ES Modula 是通过 C
前端模块化的演变过程
一. 模块化的演变过程 <1> 文件划分 缺点: 污染全局作用域,可以任意修改模块中的代码内容,没有私有空间 有命名冲突问题 无法管理模块依赖关系 <2> 命名空间方式 缺点: 模块中的内容依旧可以被
Webpack原理 26 -- 自定义plugin
1 . BannerWebpackPlugin 2 . CleanWebpaPlugin 3 . AnalyzeWebpackPlugin 4 . InlineChunkWebpackPlugin 补
Webpack原理 25 -- plugin原理
1 . Plugin 的作用: 2 . Plugin 工作原理 Webpack 在编译代码的过程中,会触发一系列 Tapable 钩子事件,插件所做的,就是找到相应的钩子,往上面挂上自己的任务,也就是
Webpack原理 24 -- 自定义loader
1 . clean-log-loader 2 . banner-loader loader的配置 options: 如下: 为schema规则的配置 在 schema.json 文件中: 第一行:表示
Webpack -- 23 loader 原理
1 . loader 执行顺序 1 . 1 优先级分类: pre:前置 loader normal:普通 loader inline:内联 loader post:后置 loader 1 . 2 执行
Webpack高级(代码优化)22 -- 总结
主要从四个方面进行了代码优化: 提升开发体验 提升打包构建速度 减少代码体积 优化代码运行性能 !!
Webpack高级 21 -- PWA 离线访问
1 . Why? 2 . 是什么? 3 . How? 下载插件 引入并配置 在 main.js 里面进行注册 下载部署静态资源服务器的库 serve npm i serve -g 执行命令 serve
下一页