在模块化的开发过程中我们经常会使用webpack来帮助我们搭建一个良好的开发环境，提升开发效率；很多人对webpack的那么多配置项感到无从下手，下面是我总结的如何构建一个简单的webpack配置。

前端的发展，大致的发展路线可以看黄玄的JavaScript 模块化七日谈。从最初的全局污染式的注入到ES6模块化，打包工具的不断迭代替换。主要的原因都是因为前端发展越来越复杂庞大所导致。 本篇文章主要是来谈谈 webpack 在我们平时的开发工作中起到什么作用，以及我们该如何灵…

1. 解决 项目 中的路径问题 2. 解决 html 中的路径问题 1. 识别 css 2. 识别 scss 3. 识别 less 4. 自动添加 css3属性前缀 5. 分离 css 6. 压缩 分离后的css 7. 净化 分离后的css 1. babel 转换 2. 压缩 …

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

在现实生活的开发中，我们经常需要对新功能进行快速迭代。在本教程中，我将向你展示一些你可以采取的措施，以提升大约 20% 的开发速度。 因为在编程时进行人工操作往往会非常适得其反，我们希望尽可能将流程自动化。因此，我将向你展示使用 Webpack v4.6.0 提升 React …

1. 区分 开发 / 生产环境 webpack-merge 开发环境时 一些工具的使用是没有意义的，比如 压缩代码、文件名哈希、分离代码等... 2. 配置 source map 3. 摇树优化 Tree Shaking 4. 作用域提升 Scope Hoisting 5. 启…

这篇文章主要是通过源码去探索下 webpack 是如何通过在编译环节创建的 module graph 来生成对应的 chunk graph。 我们都知道 webpack 打包构建时会根据你的具体业务代码和 webpack 相关配置来决定输出的最终文件，具体的文件的名和文件数量也…

上一篇总览 我们介绍了 webpack 整体的编译过程，这次就来分析下基础的 Tapable。 webpack 整个编译过程中暴露出来大量的 Hook 供内部/外部插件使用，同时支持扩展各种插件，而内部处理的代码，也依赖于 Hook 和插件，这部分的功能就依赖于 Tapable…

本地build，ftp拖拽部署这种方式，导致git版本与手动的构建、部署没啥关联，更有在本地写完代码部署上去后，压根没传git这种失误可能发生。 靠人去遵守规范来控制工作流，总会有失误、疏忽的发生。 要靠机器和代码去规范工作流，提高效率、准确性，实现真正的前端工程化。 不讨论通…