时隔两个月，我又基本写好了一个开源项目，这次给大家带来的是一个在线代码编辑器。 在两个月前我发布了我的个人第一个项目 create-neat 脚手架，而这次的在线代码编辑器使用的构建工具就是基于这个脚

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」 前言 一直想模仿公司的代码部署环境，使用GitLab的CI/CD功能自动的部署代码，还有k8s的线上容器环境，最近

由于 Lynx(公司自研跨端框架)编译工具和传统Web编译工具链有较大的差别（如不支持动态 style 和动态 script 基本告别了 bundleless 和 code splitting，模块系统基于 json 而非 js，没有浏览器环境)，且有在 Web 端实时编译(搭…

用于管理包含多个package结构的代码仓库的工具，优化工作流。新版的vue-cli、nuxt与babel均使用lerna进行自身的package管理。

webpack 的特点之一是处理一切模块，我们可以将逻辑拆分到不同的文件中，然后通过模块化方案进行导出和引入。现在 ES6 的 Module 则是大家最常用的模块化方案，所以你一定写过 import './xxx' 或者 import 'something-in-nodemod…

上一篇总览 我们介绍了 webpack 整体的编译过程，这次就来分析下基础的 Tapable。 webpack 整个编译过程中暴露出来大量的 Hook 供内部/外部插件使用，同时支持扩展各种插件，而内部处理的代码，也依赖于 Hook 和插件，这部分的功能就依赖于 Tapable…

webpack 对于每个前端儿来说都不陌生，它将每个静态文件当成一个模块，经过一系列的处理为我们整合出最后的需要的 js、css、图片、字体等文件。来自官网的图很形象的阐述了 webpack 的功能 —— bundle js / css / ... （打包全世界ヾ(◍°∇°◍)…

前2篇文章：webpack loader详解1和webpack loader详解2主要通过源码分析了 loader 的配置，匹配和加载，执行等内容，这篇文章会通过具体的实例来学习下如何去实现一个 loader。 这里我们来看下 vue-loader(v15) 内部的相关内容，这…

上篇文章主要讲了 loader 的配置，匹配相关的机制。这篇主要会讲当一个 module 被创建之后，使用 loader 去处理这个 module 内容的流程机制。首先我们来总体的看下整个的流程： 在 module 一开始构建的过程中，首先会创建一个 loaderContext…