webapck
文章平均质量分 66
webpack记录
可乐少点冰
这个作者很懒,什么都没留下…
展开
-
记一次webpack迁移至vite【antd3(4)】
本文仅记录一下现有项目由webpack迁移到vite踩到的坑原创 2022-11-02 21:22:48 · 775 阅读 · 0 评论 -
Tree-shaking
和传统的dead code elimination(DCE)区别为传统DCE消除不可能执行的代码,tree-shaking更关注消除没有用到的代码。基于作用域,在AST时对韩素或全局对象进行对象记录,然后在形成的整个作用域链对象中进行匹配import的导入并标识起来,最后打包匹配的代码,删除未匹配的。通过ES Module的特性可以进行静态分析的特点,在编译时进行静态分析导入导出关系,识别出无用代码进行剔除。从入口文件出发,找出所有读取的变量,找这些变量在哪里定义的,将定义语句包含进来,无关代码抛弃。原创 2022-10-17 17:42:15 · 1014 阅读 · 0 评论 -
webpack迁移至vite
博客地址webpack迁移至vite文章目录步骤效果对比错误处理注意事项步骤根目录新增index.html 使用module引入入口文件<script type="module" src="/src/index.tsx"></script>安装依赖yarn add -D vite @vitejs/plugin-legacy vite-plugin-importer @vitejs/plugin-react-refresh @rollup/plugin-babe原创 2021-10-25 22:15:00 · 1680 阅读 · 0 评论 -
githooks之使用husky规范git提交
Git Hooks 就是那些在Git执行特定事件(如commit、push、receive等)后触发运行的脚本Git Hooks功能作用 多人开发代码语法、规范强制统一 commit message 格式化、是否符合某种规范 如果有需要,测试用例的检测 服务器代码有新的更新的时候通知所有开发成员 代码提交后的项目自动打包travis ci(git receive之后) 等等husky介绍Git hooks made easy 让githooks使用起来简单的工具实例:现在使.原创 2020-11-11 16:37:11 · 1867 阅读 · 0 评论 -
webpack优化
webpack优化小结测量打包速度配置loaderDLL、Externals多进程使用缓存多进程代码压缩测量打包速度speed-measure-webpack-plugin插件progress-bar-webpack-plugin插件--report-json 命令参数配置loader优化搜索时间、缩小文件搜索范围、减少不必要的编译工作DLL、Externals原理都是减少第三方库的编译多进程thread-loader(v4以后的官方推荐)happypack(不怎么维护了原创 2020-10-10 18:08:30 · 153 阅读 · 0 评论 -
webpack热更新思维图
原创 2020-05-20 18:16:06 · 132 阅读 · 0 评论 -
commonjs、AMD、CMD
webpack运行在node.js上,所以模块化规范也同node.js 使用的是commonjs规范commonjs规范内容一个文件就是一个模块,模块间作用域互不影响模块的定义 module.exports模块的引用 require(‘标识符’)模块标识符服务端commonjs规范为同步加载,适用于服务端,在浏览器中js加载会阻塞页面渲染,因此同步不适用浏览器端产生了amd(...原创 2019-05-21 18:28:52 · 133 阅读 · 0 评论 -
Vue跨域请求(反向代理)
跨域 之前我们介绍了cookie的跨域访问。今天发现了另一个跨域的好方法反向代理。介绍浏览器对于JavaScript具有同源策略,服务器之间没限制,vue在调试时会自动启用一个本地服务,我们在调用跨域的接口时通过代理即可让本地的服务代理浏览器的请求接口,获取结果再返回给浏览器,这样就实现了跨域。客户端(请求)-&amp;gt;本地服务器-&amp;gt;远程接口(响应)-&amp;gt;本地服务器-&amp;gt;客户...原创 2018-09-19 15:20:05 · 912 阅读 · 0 评论 -
webpack 处理网页小图标favicon
问题现象:vue脚手架使用了HtmlWebpackPlugin插件打包index中的依赖,因此设置小图标的时候按原来的方法会出现问题 在页面源文件index.html的标签之间插入<link rel="shortcut icon" href=" /favicon.ico" /> 仍然无法加载小图标解决方法:HtmlWebpackPlugin插件中加入小图标 ...原创 2018-09-05 16:52:24 · 5389 阅读 · 1 评论 -
问题杂记-webpack使用遇到的问题
1、fileSystem.statSync is not a function出现情景:使用babel进行es6转换时原因:webpack版本与babel-loader不匹配解决:使用相匹配的版本如果babel-loader >= 7.0.0 那么webpack >=2.2.0 如果webpack 1.x请用babel-loader 6.x注意事项: npm i -D -g w...原创 2018-04-04 17:29:46 · 282 阅读 · 0 评论 -
webpack配置多页应用-2
公共库的处理原因上一节我们说到了vender.bundle.js这个公共库。在多页面应用里我们经常会有多个页面都需要引入相同的文件如bootstrap、jquery等,如果每次都将其打包进js里是不是就浪费流量,因为每次打开一个新页面都请求一次js,而公共部分的js我们完全可以放在同一个js文件里,在第一次请求时加载,后面页面用到同样的文件时是不是直接从缓存里拿来用就行了,这样页面加载的js部分是...原创 2018-04-04 17:08:28 · 1687 阅读 · 0 评论 -
webpack配置多页应用-1
大致思路:多页应用就是多个页面分别引入资源(js、css)等文件结构|-- project|-- src|-- html|-- pageA.html|-- pageB.html|-- js|-- index.js|-- pageB.js|-- pageA.js|-- webpack.config.js一、生成页面绑定js在使用webpack打包...原创 2018-04-03 16:47:00 · 1095 阅读 · 0 评论 -
webpack配置多页应用-3
一、使用babel编译es6语法引入css文件我们只需在入口文件里requirecss文件进来即可,当然也可以使用es6的import语法。这样的话我们得先安装es6转es5的加载器babel啦。具体步骤1.安装相关模块npm install --save-dev babel-core babel-loader babel-preset-env2.在webpack.config.js中添加load...原创 2018-04-09 15:24:14 · 714 阅读 · 0 评论