webpack
文章平均质量分 85
夜跑者
目前从事web前端,小程序开发。熟悉vue框架,uni-app跨端框架。
展开
-
webpack 4 源码主流程分析(一):前言及总流程概览
此系列文章作为笔记,用于记录分析webpack源码主流程的过程。转载 2022-09-29 14:09:48 · 110 阅读 · 0 评论 -
了不起的 Webpack 构建流程学习指南
本文主要介绍了 Webpack 的构建流程和构建原理,并在此基础上,和大家分享了手写 Webpack 的实现过程,希望大家对 Webpack 构建流程能有更深了解,毕竟面试贼喜欢问啦~到这里,相信大家对 Webpack 构建流程已经有所了解,但是这还不够,我们再来试着手写 Webpack 构建工具,来将上面文字介绍的内容,应用于实际代码,那么开始吧~配置,调用所有配置的 loader 对文件进行转换,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。为了方便测试,我们补充下。转载 2022-09-29 14:08:36 · 287 阅读 · 0 评论 -
[万字总结] 一文吃透 Webpack 核心原理
Webpack 编译过程会将源码解析为 AST 吗?webpack 与 babel 分别实现了什么?构建阶段会读取源码,解析为 AST 集合。Webpack 读出 AST 之后仅遍历 AST 集合;babel 则对源码做等价转换Webpack 编译过程中,如何识别资源对其他资源的依赖?Webpack 遍历 AST 集合过程中,识别之类的导入语句,确定模块对其他资源的依赖关系相对于 grant、gulp 等流式构建工具,为什么 webpack 会被认为是新一代的构建工具?转载 2022-09-29 14:06:57 · 164 阅读 · 0 评论 -
webpack 4 源码主流程分析(一):前言及总流程概览
此系列文章作为笔记,用于记录分析webpack源码主流程的过程。转载 2022-09-27 08:56:49 · 67 阅读 · 0 评论 -
从Webpack源码探究打包流程,萌新也能看懂
上一节提到的SingleEntryPlugin(还有其他的EntryPlugin),就是一个启动口,等到触发compile.hooks.make的时候,就会启动SingleEntryPlugin中的compilation.addEntry这个方法,这个方法就是启动构建入口模块,成功后将入口模块添加到程序之中。mainTemplate.render触发了hooks.render这个钩子,返回了一个ConcatSource的资源。转载 2022-09-16 15:17:24 · 260 阅读 · 0 评论 -
webpack打包原理 ? 看完这篇你就懂了 !
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。转载 2022-09-13 14:07:30 · 341 阅读 · 0 评论 -
深入理解webpack之resolve
相信很多用过vue-cli的朋友对都不会感到陌生,但不知有多少和我一样的朋友只知其行未解其意恰巧之前详细的查阅了相关文档,弄清楚了这个问题,在此做下记录,也希望能对读到的朋友有益。说一下题外话,真心建议大家一定要细读相关文档,很多不清楚的问题都是因为没有仔细的阅读。言归正传,webpack中使用字段来配置模块的相关解析策略。本质上是通过对resolve库的使用来解析模块路径,帮助 webpack 找到 bundle 中以require/import引入的模块代码。转载 2022-09-08 10:17:58 · 2707 阅读 · 0 评论 -
涂鸦云开发 demo 登录
涂鸦Iot 云开发平台提供了 前后端demo,前端demo地址:后端demo地址:此demo采用微前端框架qiankun,react框架来开发的。前端要配置代理访问后端接口,前端demo中配置代理如下:后端demo跑到本地8080端口上(http://localhost:8080/),如果请求路径带有/api 则代理到后端demo服务上。这个前端demo 直接用express起的服务。如果我们采用vue框架怎么配置此代理呢?用vue-cli创建的项目,直接在根目录创建vue.config.原创 2022-06-28 17:38:41 · 261 阅读 · 0 评论 -
Rollup:下一代ES模块打包工具
文章转自:【第九期】Rollup:下一代ES模块打包工具 - 知乎Vue,React,D3等众多知名项目都使用rollup进行构建打包,为什么没有选择我们项目中经常使用的webpack呢?这篇文章主要分析下rollup同webpack相比打包的优势以及它的一些基本使用方式。背景rollup从设计之初就是面向`ES module`的,它诞生时AMD、CMD、UMD的格式之争还很火热,作者希望充分利用`ES module`机制,构建出`结构扁平`,`性能出众`的类库。ES modul..转载 2021-11-11 14:44:11 · 1051 阅读 · 0 评论 -
IgnorePlugin 插件减少bundle体积
webpack 这个插件IgnorePlugin 可以用来减小包体积的。例如我们引用moment这个库来格式化日期,这个库可以支持多种语言,而我们只需要一种语言,那么就可以利用IgnorePlugin这个插件来只加载所需要的语言,其他语言都不加载。我们来比较一下1)...原创 2020-12-15 20:47:40 · 718 阅读 · 0 评论 -
vue-cli3 配置不同环境变量 process.env.NODE_ENV
文章转自:https://www.cnblogs.com/web-zqk/p/11893137.html 建议直接看原文相比vue-cli2,vue-cli3简化了配置区分不同的环境变量process.env.NODE_ENV,以我嘴巴都懒得张的风格,直接上代码.如:1、在根目录下,新建各个环境的text文件,例如: .env.demoNODE_ENV = 'demo'VUE_APP_TITLE = 'demo' // 定义全局变量必须以VUE_APP开头VUE_APP_...转载 2020-12-14 09:15:30 · 4197 阅读 · 0 评论 -
减少打包组件vue.config.js——Webpack的externals的使用
文章转自:https://www.cnblogs.com/xbzhu/p/11815197.html减少打包组件vue.config.js——Webpack的externals的使用vue.config.jsmodule.exports = { configureWebpack:{ externals: { vue: 'Vue', 'vue-router':'VueRouter', axios: 'axios'转载 2020-12-11 16:05:47 · 4443 阅读 · 1 评论 -
jsDelivr 为开发者提供免费公共 CDN 加速服务
文章转自:https://blog.csdn.net/larpland/article/details/101349605开发者或网站管理者时常会用到一些 JavaScript Libraries,例如最常见的 jQuery 或字型和 CSS 框架,通常不建议自己在服务器存储这些文件,因为除了耗流量,也可能因此拖慢网站的载入速度。为了解决这种情况,有些人会选择从 [Google Hosted Libaries ](https://developers.google.com/speed/librarie转载 2020-12-11 16:03:30 · 792 阅读 · 0 评论 -
Vue项目打包部署总结
文章转自:vue中文社区公众号Vue中文社区昨天作者:MUMAhttps://wintc.top/article/29使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂,不过一些前端同学可能对服务器接触不多,部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题,内容概览:Vue项目打包发布问题汇...原创 2020-12-10 08:51:23 · 1020 阅读 · 0 评论 -
webpack 异步加载原理
文章来自前端大全公众号,写的不错webpack 异步加载原理webpack ensure有人称它为异步加载,也有人称为代码切割,他其实就是将 js 模块给独立导出一个.js 文件,然后使用这个模块的时候,再创建一个script对象,加入到document.head对象中,浏览器会自动帮我们发起请求,去请求这个 js 文件,然后写个回调函数,让请求到的 js 文件做一些业务操作。举个例子需求:main.js依赖两个 js 文件:A.js是点击 aBtn 按钮后,才执行的逻辑,B....原创 2020-12-04 13:46:30 · 513 阅读 · 0 评论 -
Default export of the module has or is using private name VueConstructor
在Vue项目中集成typescript,按网上资料配置了一下,基本可以在.Vue文件中写typescript代码了。 但在使用Vue.extend时,报错:Default export of the module has or is using private name 'VueConstructor'。 在Google上搜索了一番,原来在tsconfig.json文件中要配置"declaration": false, 选项。不配置此属性,或设置为true都会报这个错误。...原创 2020-06-02 08:42:23 · 2755 阅读 · 1 评论 -
Webpack+ Vue2.5 引入 Typescript 全面指南
写在前面写这篇文章时的我,Vue使用经验三个多月,Typescript完全空白,花了大概三个晚上把手头项目迁移至Typescript,因此这篇文章更像个入门指引。总原则两大原则:最小依赖引入由于我个人从Javascript到Typescript的升级,更倾向于平滑顺移,因此,我对新依赖的引入整体保持克制原则,只引入了必要项,以尽量贴近原生vue写法:typescript ts-loader以下依赖均未引入:vue-class-component:官方维护,学习成本小,但与v转载 2020-05-28 17:05:39 · 503 阅读 · 0 评论 -
Vue + webpack 集成 typescript遇到的问题
Vue工程中用webpack作为打包工具,集成typescript步骤以及遇到的问题如下:1) 安装typescript以及ts-loader npm i --save-dev typescript ts-loader 用到的webpack版本为:"webpack": "^3.6.0" 默认安装的typescript和ts-loader版本比较高,需要webpack 4.0以上版本配合才行(在编译过程中出现了错误)。所以安装一个比较低的版本:npm i --save...原创 2020-05-26 20:23:10 · 437 阅读 · 0 评论 -
vue-cli中理不清的assetsSubDirectory 和 assetsPublicPath
文章转自:https://www.jianshu.com/p/da6be1f619b8前言一般情况下,我们借用 vue-cli之力安装好所有依赖后,我们就可以愉快的板砖了。但是也经常会遇到一写问题,比如assetsSubDirectory 和 assetsPublicPath两个兄弟有时候把我搞得死去活来的,下午刚好有点空,我就去好好修理了他俩一会儿(其实是被修理)。经过无数次的,config/index.js 里面的 build配置,然后无数次的 npm run build ,鄙人得出了以下之间,转载 2020-05-20 14:09:19 · 910 阅读 · 0 评论 -
动态引入(require, import)
文章转自:https://www.dazhuanlan.com/2019/12/15/5df63790ae230/?__cf_chl_jschl_tk__=eacc74b5ed8c2f307461492753ace6f066ea65ba-1584858192-0-AXUV-b_QbPVyyf7UVyr4aiknQnDOv1jnzM5rCD2AcILNh3Xy2Wqp1DzBA_rIaarYlTHq...原创 2020-03-22 14:58:22 · 15906 阅读 · 0 评论 -
abcd
https://www.cnblogs.com/qiufenghua/p/6772949.html原创 2020-03-18 12:18:06 · 98 阅读 · 0 评论 -
vue项目通过webpack打包生成的dist文件放到express里边运行
文章转自;https://blog.csdn.net/wang1006008051/article/details/78055590通过Vue渐进式框架写了一个项目,项目写完后,通过npm run bulid 生成上线文件dist。但是在运行npm run bulid这条命令的 时候居然报错,提示我什么缺少bulid,打开package.json看了一下,命名在的啊。通过与它对应的 ...转载 2020-03-16 19:09:09 · 306 阅读 · 0 评论 -
使用require.context实现前端工程自动化
文章转自:https://www.jianshu.com/p/c894ea00dfecrequire.context是什么一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用impor...转载 2019-10-11 09:58:04 · 249 阅读 · 0 评论