在研究 HMR 的过程中，通过 Chrome 的开发者工具，我知道浏览器是通过 websocket 和 webpack-dev-server 进行通信的，但是我在 websocket 中并没有发现任何代码块。那么新的代码块是怎么跑到浏览器的呢？这个 websocket 又有什么…

本文通过几个例子演示常用的webpack插件的作用以及使用方式，从而加深对webpack的理解。 说明：本文是基于webpack 4.x进行的实验。 webpack是模块打包器，可以把资源打包成javascript资源；webpack-cli是webpack的命令行接口，可以通…

关注公众号玩相机的程序员，第一时间阅读最新文章。 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供了终端命令行工具、零配置脚手架、插件体系、图形化管理界面等。本文暂且只分析项目初始化部分，也就是终端命令行工具的实现。 0. 用法 目前 Vue CLI 同时…

问题：我们会发现每次修改源目录文件的内容时整体页面都会被刷新，页面会被重新加载，如果我们的页面含有之前填写过的表单信息，然后我们又去改动了源目录某个文件的内容，按下CTRL+S保存后我们会发现之前填写过的表单数据因为整体页面的reload被清空了，这种情况往往不是我们想要的效果…

1. webpack-dev-server 无法启动项目 2. 启动项目之后报错 3. devtool 4. 开启 hot: true 但是热更新无效 还需要注意一个问题：如果使用了 mini-css-extract-plugin 插件（将样式以 link 的形式引入而不是 s…

url-loader对未设置或者小于limit设置的图片进行转换，以base64的格式被img的src所使用；而对于大于limit byte的图片用file-loader进行解析。 minify 使用minify会对生成的html文件进行压缩。默认是false cache 默认…

想做个测试或者某个东西的demo，需要新建一个项目。如果从 0 开始，要配置一大堆东西，耗时长；如果直接用现在流行的一些脚手架，如vue-cli等，黑箱操作，你需要阅读文档，也很难全局看清里面到底有哪些内容... 在某个项目里，新建一个组件，其实有些固定的文件都要建，如xxx.…

将用户的输入作为插值插入到我们的模版中。实现定制化