我们在开发网站的时候，通常会把常用的图标合并成css sprite(雪碧图)，可以有效的减少站点的http请求数量，从而提高网站性能。 下面让我们一起来学习一下如何使用webpack合并sprite图。 好了，以上就是webpack生成css sprite的办法了，是不是觉着很…

经常逛 webpack 官网的同学应该会很眼熟上面的图。正如它宣传的一样，webpack 能把左侧各种类型的文件（webpack 把它们叫作「模块」）统一打包为右边被通用浏览器支持的文件。webpack 就像是魔术师的帽子，放进去一条丝巾，变出来一只白鸽。那这个「魔术」的过程是…

另外可以发现并不是一个 token 对应一个 Node，等号左右必须都有值才能组成一个声明语句，否则会作出警告，这就是 eslint 的基本原理。最后所有的 Node 组合在一起就形成了 AST 语法树 通过 @babel/traverse 我们能够轻松的找到 await 表达…

既然标题说了是深入Babel，那我们就不说Babel各种用法了，什么babel-core，babel-runtime，babel-loader……如果你想了解这一部分内容，这类文章很多，推荐最近看到的一篇：一口(很长的)气了解 babel，可以说是相当详实完备了。 言归正传，这…

随着前端构架工具的不断发展，提供了很多提高我们的开发体验和开发效率的能力，同时构建已经成为前端技术栈中常见的技术。 webpack 也是众多构建工具中崭露头角一员，早期的 webpack 配置复杂难懂，随着其发展，相关配置也不断简化，性能也不断提高，但是对于深入使用的开发人员，…

我们经常使用create-react-app、vue-cli来快速生成一个新的react或者vue项目，它们的原理是什么，下面就带使用node来开发一个简单的react-cli工具，来揭开其神秘的面纱。 在这里我维护了两套react模板供选择，放在src目录下去，大家可以根据需…

而关于如何应用该路径并没有说清楚... 这个最终静态资源访问路径在使用html-webpack-plugin打包后得到的html中可以看到。所以publicPath设置成相对路径后，相对路径是相对于build之后的index.html的，例如，如果设置publicPath: '…

开发多页应用的时候，如果不对webpack打包进行优化，当某个模块被多个入口模块引用时，它就会被打包多次（在最终打包出来的某几个文件里，它们都会有一份相同的代码）。当项目业务越来越复杂，打包出来的代码会非常冗余，文件体积会非常庞大。大体积文件会增加编译时间，影响开发效率；如果直…

... 简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。本文以 babel 6.x 为基准进行讨论。最近 babel 出了 7.x，放在最后聊。 严格来说，babe…