loaders - 是一个函数，接受源文件作为参数，返回转换结果。 webpack 本身只支持 js 和 json 两种文件类型，通过 loaders 可以去支持其他文件类型并且将他们转换成有效的模块，还能添加到依赖模图中。 核心思想： 代码集成到主干之前，必须通过自动化测试，…

Webpack 是一个模块打包工具。 因为浏览器并不支持 JS 的模块化导入。这时候 Webpack 便派上用场了。 上面的例子中，我们可以将 test.js 和 index.js 打包成一个文件 main.js ，然后在 index.html 引入 main.js。 📦 W…

wenpack从入门配置到深度优化，一文搞定。带你从零开始，彻底了解webpack是如何构建打包的。

通过如何利用webpack来提升前端开发效率（一）的学习，我们已经能够通过webpack的loader和piugin机制来处理各种文件资源。细心的小伙伴们发现了缺少了对字体文件和HTML中<img>标签的资源处理，那让我们先来解决这个问题。 随后在命令行执行npm run bu…

近几个月，接手了一个老项目的重构规划，有多老呢？就是前端青铜时代的项目，一个前后端都在同一个锅里的项目、完全没有使用任何的打包工具。 前端 html、css、js三剑客 加上 jQuery 复制粘贴就是干。 前端不够后端来凑。如果前端有一些需求不是很复杂的话，后端人员有时候也会…

随着单页应用发展的越来越庞大，拆分js就是第一要务，拆分后的js，就可以根据我们需求来有选择性的加载了。 这里就添加了一句，chunkFilename而已，chunkFilename的作用就是用来给拆分后的chunk们起名字的配置项。 还是只打包出了一个main.js，毫无变化…

webpack的熟练使用已成为当代前端工程师必备的生存技能。毋庸置疑，webpack已成为前端构建工具的佼佼者，网络上关于如何使用webpack的技术文档层出不穷。但鲜有能将webpack的构建流程讲清楚的。本文尝试从解读源码以及断点调试的方式，来探究 webpack 是如何一…

前面啰嗦了半天理论，接下来使用 require.context 来引入。该套路比较固定，因此，不用刻意去理解 ignore 之后，mock 文件夹不会被 git 仓库收录，也就是多人合作开发的时候，大家的 mock 文件互不干扰。 如果没有 ignore，且不做任何处理，很不幸…