部分小节提供了非常详细的实战教程，让大家动手实践。 另外我还写了一个前端工程化 demo 放在 github 上。这个 demo 包含了 js、css、git 验证，其中 js、css 验证需要安装 VSCode，具体教程在下文中会有提及。 对于前端来说，技术选型挺简单的。就是…

4.1 生成package.json文件,配置npm scripts. 6.1 该文件主要用来配置构建开发环境和生产环境差异化的参数. 7.1 此文件主要是webpack开发环境和生成环境的通用配置. 9.1 此文件主要用于构建生产环境的配置. #10. 创建 build/bu…

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

最近在前端论坛闲逛，看到了一些讲parcel、webpack的文章，就突然很好奇，每天都在用的打包工具，他们打包的原理究竟是什么。只有知道了这一点，才可以在众多的打包工具里，找到最适合的那个它。在了解打包原理之前，先花一些篇章说明了一下为什么要使用打包工具。 前端产品的交付是基…

webpack的成功之处，不仅在于强大的打包构建能力，也在于它灵活的插件机制。 也许你了解过webpack的插件与钩子机制；但你或许不知道，webpack内部拥有超过180个钩子，这些钩子与模块（内置插件）之间的「创建」「注册」「调用」关系非常复杂。因此，掌握webpack内部…

项目模板库地址：https://github.com/ruanyf/react-babel-webpack-boilerplate

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。并且跟具你的在项目中的各种需求，实现自动化处理，解放我们的生产力…

本文主要从webpack4.x入手，会对平时常用的Webpack配置一一讲解，各个功能点都有对应的详细例子，所以本文也比较长，但如果你能动手跟着本文中的例子完整写一次，相信你会觉得Webpack也不过如此。 简单来说，它其实就是一个模块打包器。 如果像以前开发时一个html文件…

Entry（入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 Module（模块）：在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。 Chunk（代码块）：一个 Chun…