现在工程项目中，实现高性能应用的其中重要的一点就是让用户每次只加载必要的资源，优先级别不太高的资源采用延迟加载等技术渐进地进行加载获取。 Webpack 作为打包工具所特有的一项技术就是代码分片技术，通过这项技术我们可以把代码按照特定的形式进行拆分，使用按需加载资源，不必要全部…

在两个月前，我开始了一次对国内各大互联网前端技术体系的探索之路。自己的技术视野也得到不断扩展，自身对于大前端的技术也建立起了比较完整的体系，同时也可以很好的了解当前的技术风向。 一句话总结：阿里的前端技术体系非常完整，并且已经完成了多轮演进，无论是基础设施的完备性，还是在Web…

说实话，我从工作开始就一直在接触babel，然而对于babel并没有一个清晰的认识，只知道babel是用于编译javascript，让开发者能使用超前的ES6+语法进行开发。自己配置babel的时候，总是遇到很多困惑，下面我就以babel@7为例，重新简单认识下babel。 b…

webpack 可以把它理解为一款工具，一款帮助我们打包的工具，也可以称之为前端构建工具。 简单来说 webpack 做的事情就是将一些特别复杂且浏览器无法识别东西，通过 webpack 编译、打包后，生成了浏览器可以识别的静态资源。 我们需要做的就是在配置文件中写好配置，然后…

所有的内容之后会陆续放出，如果你有任何想要了解的内容或者有任何疑问，关注公众号【前端瓶子君】回复【123】添加好友，我会解答你的疑问。 作为一个前端开发人员，我们花费大量的时间去处理 webpack、gulp 等打包工具，将高级 JavaScript 项目打包成更复杂、更难以解…

在配置 Webpack 时，需要区分用于开发模式还是生产模式。比如我们只需要在生产模式时压缩 CSS；而在开发模式的时候，我们又希望生成 Sourcemap 便于调试，以及样式热更新。那么，怎么在 webpack.config.js 中判断开发、生产模式呢？ webpack.c…

最近的开发项目中使用了vue-cli 3.0，使用体验可以说非常棒了，模板更加制定化，配置更加简洁。以下总结下应用过程中的一些经验。 打包后的文件，对引用资源注入了预加载（preload/prefetch），启用 PWA 插件时注入 manifest/icon 链接，并且引入(…

Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级 Webpack 还是一头雾水。 不过 Webpack 的开发团队已经写了一些零散的文章，官网上也有…

原先我一直以为这个插件，可以用来设置所有环境（浏览器环境、node 环境）下的变量。经过测试发现，只能设置node 环境下的变量 —— NODE_ENV 经常在一些群里看到这个问题： cross-env 和 webpack.DefinePlugin 配合使用的时候，无法通过 p…