可能你学会了如何使用 Webpack ，也大致知道其工作原理，可是你想过 Webpack 输出的 bundle.js 是什么样子的吗？ 为什么原来一个个的模块文件被合并成了一个单独的文件？为什么 bundle.js 能直接运行在浏览器中？ 下面通过 Webpack 构建一个采用…

首先，没有标题党！这套教程确实是免费的，并且针对每节讲解准备了对应的代码，代码环境是webpack4。 课程以常见的webpack4用法为主线，按照从易到难的顺序，逐步引导搭建，渐进式教程真香。 说句实在话，webpack4其实完全靠文档，但是刚入手的时候还是有个简易教程比较好…

第一个 loader 的传入参数只有一个：资源文件(resource file)的内容。compiler 需要得到最后一个 loader 产生的处理结果。这个处理结果应该是 String 或者 Buffer（被转换为一个 string） ，代表了模块的 JavaScript 源…

默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。但是有些情况下，我们需要操作二进制数据。这种时候，只需要设置一个raw属性，传给loader的就是二进制数据。 其实raw-loader只是通过功能来区分的。同样在内部可以实现同步loader和异步lo…

如果你的项目也在使用发布系统或者是CI工具，而且项目比较大，发布经常需要耗费十几分分钟，那么以下的工具可能会对你起作用。 影响前端发布速度的有两个方面，一个是构建，一个就是压缩，把这两个东西优化起来，可以减少很多发布的时间。

随着2018年2月15号webpack4.0.0出来已经有一段时间了，webpack依靠着“零配置”，“最高可提升98%的速度”成功吸粉无数，对于饱受项目打包时间过长的我，无疑是看到了曙光，于是决定开始试水。 随着项目的不断迭代，样式文件和js文件的数量越来越多，造成webpa…

最开始，无论我们在控制台输入webpack指令还是使用Node.js的API，都是调用了webpack函数（源码）,并传入了webpack的配置选项，创建了一个 compiler 实例。 compiler 是什么？—— 明显发现compiler保存了完整的webpack的配置参…