前言之前用vuecli做了个博客，是一个单页面项目，大概有十个路由直接npmrunbuild打包出来，有一个1M的巨大js文件先挂载到服务器上试试好家伙这加载时间仿佛过了半个世纪首屏页面整整加载了9s

需要读到入口文件里面的内容。 分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。 我们创建了add.js文件和minus.js文件,然后 在index.js中引入，再将index.js文件引入index.html。 现在我们打开index.html。你猜会发生什…

还是以前一样，有些概念面试可能会考，我都用*标记了出来，两句话就总结清楚其余的地方如果你想了解webpack，就仔细看看，虽然本教程不能让你webpack玩的很6，但是懂操作流程够了。面试你一般问你webpack的原理，Loader的原理，你有用那些优化措施 前端开发已经模块化…

在使用 Webpack 时，如果不注意性能优化，可能会产生性能问题，会导致在开发体验上不是非常丝滑，性能问题主要是编译速度慢，打包体积过大，因此性能优化也主要从这些方面来分析。本文主要是自己平时的工作积累和参考别人的文章，而进行总结，基于 Webpack4 版本。 对 Webp…

在开发的工程中，线上环境需要引入一些统计和打印日志的js文件。但是对于开发环境，加速打包速度减少页面渲染时间很关键。我于是想根据开发环境，写一个简单的loader,按需加载一些资源。 为了完成按需加载的功能。打算使用自定义的loader。 拿到传入的参数并根据环境判断是否加载。…

Webpack可以将其理解是一种基于事件流的编程范例，一个插件合集。 而将这些插件控制在webapck事件流上的运行的就是webpack自己写的基础类Tapable。 将plugin控制在webapack事件流上运行（如下图）。后面我们将看到核心的对象 Compiler、Com…

一. 核心概念 2. output（输出） 3. loader（资源解析转换） 4. plugin （利用插件对webpack进行扩展和增强） 5. mode（针对开发环境和生成环境的区分处理） 二. 常用配置 6. devServer（热更新） 7. resolve(模块解析…

五. webpack原理 六. loader 1. 简介 2. 运行环境 3. 参数获取 4. 异常处理 5. 异步处理 6. 缓存的使用 7. 文件输出 七. 插件（plugin） 1. 简介 2. 运行环境 3. 获取参数 4. 异常处理 5. 文件写入

安装完成后，输入命令vue --version，查看Vue CLI的版本号是否是3.0以上，是代表安装成功。 因为在Vue CLI2中使用npm run dev命令启动项目。 使用npm install安装依赖，安装成功后，执行npm run dev,执行成功后在浏览器打开 h…