随笔分类 - 前端构建工具
摘要：Webpack-CodeSplit（动态文件篇） 在静态文件处理代码切割时，我们提到了如何处理vendor以及manifest的分离，那么抛开这两点，如果在业务逻辑中，我们如何做到代码最小加载，让浏览器加载效率提速呢，这里我们就利用了webpack codesplit的另一个特性，代码按需加载打包实
阅读全文
摘要：何为CodeSplitting? webpack从入口文件开始遍历，找到所有依赖文件，然后打包成最终的一个文件，即bundle.js文件，这是我们经常使用的方式，当一个项目慢慢变得复杂的时候会导致这个bundle.js文件越来越大，浏览器加载的速度也会越来越慢，这个过程还不排除我们需要引用的第三方文
阅读全文
摘要：前端构建场景有两种，一种是单页面构建，另一种是多入口构建多页面应用程序（我视野比较小，目前就知道这两种），下面我们针对这两种场景总结了几种抽离第三方类库以及公共文件的解决方案。 如果有哪些地方优化不周到，请指点一二，另外求关注求星星，么么哒 单页面构建： 常规配置 const path = requ
阅读全文
摘要：Webpack基础配置： 语法解析：babel-loader 样式解析：style-loader css解析：css-loader less解析：less-loader 文件解析：url-loader（file-loalder） 性能分析：webpack-bundle-analyzer 代码： 打包
阅读全文
摘要：理想的前端开发流程 在说构建工具之前得先说说咱期望的前端开发流程是怎样的？ 写业务逻辑代码（例如 es6，scss，pug 等） 处理成浏览器认识的（js，css，html） 浏览器自动刷新看到效果 前端开发就是在不断的 123..123..123.... 循环中进行的，上面的后两步（也就是 2 和
阅读全文
摘要：安装搭建node环境 下载node地址：https://nodejs.org/en/download/ 测试环境是否安装成功，安装成功之后执行命令可以看到node的版本号。 查看npm版本 现在准备环境做好，开始webpack之旅。 首先利用npm生成一个package.json文件，这里生成一个默
阅读全文
