webpack是为现代js程序准备的静态模块打包工具 一：关于对webpack的理解 可以将其认为是一个电脑主板，由于使用js作为源码，因而其可以默认编译js代码(别种类型的文件可以依靠loaders或plugins)，因为其底层由node提供支持，因而其支持编译common/esmodule的导入 ...
转载
2021-05-25 23:29:00
152阅读
2评论
目录：从分析源码告诉你如何搭建代码架构 前端晋升必知必会之初探数据结构与算法 你不知道的vue那些事 - 网易内部花式玩转vue Vue编译器 - 编译原理初探 webpack不再神秘-教你带你自己写一个loader 网易面试-高级前端之VUE数据响应式实现 从源码探究构建工具之手动实现webpack vuex源码探秘—带你走进一个崭新的世界从分析源码告诉你如何搭建代码架构...
原创
2021-06-07 16:45:57
289阅读
去年6月，开始打算认真的看一个大框架的源码， 当时选择了看webpack... https://juejin.im/post/5bf7c2186fb9a049fd0f7e8a 主要在看的是这里的系列文章， 从tapable开始看.. 学习过程的一路中， 不知不觉，7、8个月过去了， 一直到今天，终于
原创
2021-09-05 10:25:49
154阅读
阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收
原创
2022-10-04 22:09:47
142阅读
再总结一下： 1.读取配置，开始Compilation，2.创建module， 从入口开始resolve，对loaders resolve，执行loaders，parse成AST，处理AST，为module添加dependency3.递归处理，直到全部转为modules4.构造module grap
原创
2021-09-01 17:02:40
287阅读
/** * 对于没有代码分割的，webpack会打包生成main.js一个大的自执行函数 * 函数参数是一个对象，键值分别是路径和模块的函数 * 函数内部定义了一些方法，包括__webpack_require__ * 函数内部执行逻辑会从一个入口开始进行webpackrequire按内部依赖的逻辑来
原创
2021-09-01 16:03:21
595阅读
1. webpack编译流程 初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数； 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译； 确定入口：根据配置中的entry找出所有的入口文件 编译模块：从入口文件出发，调用所
转载
2020-04-23 14:04:00
552阅读
2评论
一、HMR 介绍Hot Module Replacement（以下简称：HMR 模块热替换）是 Webpac
转载
2022-10-19 13:54:56
132阅读
新建一个项目，再新建一个src文件夹，里面有三个文件，word.js,message.js,index.js word.js export const word = 'hello'; message.js message.js import { word } from './word.js'; co
转载
2019-05-26 20:16:00
90阅读
2评论
Hot Module Replacement（以下简称 HMR）是 webpack 发展至
转载
2022-03-29 11:20:37
167阅读
Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。例如，在开发 Web 页面过程中，当你点击按钮，出现一个弹窗的时候，发现弹窗标题没有对齐，这时候你修改 C
转载
2021-06-30 13:39:16
410阅读
历经五年迭代，Webpack 5 于 2020 年 10 月正式 GA，随后在 5.x 的历次小版本中持续交付性能红利与开发体验升级。本文将聚焦五个关键领域：输出清理、顶层 await、体积优化、持久缓存与资源模块，帮助团队无痛迁移并充分理解新版本。
Webpack 解析css css-loader: 加载css对象，并转换成commonjs对象 style-loader: 将样式写入style标签并插入到header中 安装loader npm i style-loader@0.23.1 css-loader@2.1.1 -D 配置webpac ...
转载
2021-09-24 00:24:00
303阅读
2评论
在开发阶段，webpack-dev-server会启动一个本地开发服务器，所以我们的应用在开发阶段是独立运行在localhost的一个端口上，而后端服务又是运行在另外一个地址上，所以在开发阶段中，由于浏览器同源策略的原因，当本地访问后端就会出现跨域请求的问题，通过设置webpack proxy实现代理请求后，相当于浏览器与服务端中添加一个代理者，当本地发送请求的时候，代理服务器响应请求，并将请求转发到目标服务器，目标服务器响应数据后再将数据返回给代理服务器，最终再由代理服务器将数据响应给本地。
最近在学习Vue，使用到webpack的时候，出现了错误，可能是3和4的版本问题webpack-dev-server安装好webpack-dev-server后，需要在package.json 的scripts 增加代码 "dev": "webpack-dev-server""scripts": {
"test": "echo \"Error: no test specified\" &a
转载
2021-04-29 14:43:57
329阅读
2评论
【重学webpack系列——webpack5.0】
以下是本节正文：
import()对于webpack来说，是一个天然的分割点，也就是说，webpack碰到import()会对import()进行解析。怎么解析的，过程主要是：
面试题：webpack解析import()的原理/webpack懒加载原理/webpack异步加载原理:
首先，webpack遇到import方法时，会将其当成
原创
2021-09-02 10:23:15
1443阅读
说明玩转webpack课程学习笔记。解析 CSS1、安装依赖npm i style-loader css-loader -D
原创
2022-08-18 07:24:12
119阅读
说明玩转webpack课程学习笔记。解析图片1、安装依赖npm i file-loader -Dfile-loader 用于处理
原创
2022-08-18 07:25:23
63阅读
