摘要：
为什么需要区分环境 为什么需要区分环境 在开发网页的时候，一般都会有多套运行环境，例如： 在开发过程中方便开发调试的环境。 发布到线上给用户使用的运行环境。 这两套不同的环境虽然都是由同一套源代码编译而来，但是代码内容却不一样，差异包括： 线上代码被通过 4-8 压缩代码 中提到的方法压缩过。 开发 阅读全文
摘要：
为什么需要按需加载 为什么需要按需加载 随着互联网的发展，一个网页需要承载的功能越来越多。 对于采用单页应用作为前端架构的网站来说，会面临着一个网页需要加载的代码量很大的问题，因为许多功能都集中的做到了一个 HTML 里。 这会导致网页加载缓慢、交互卡顿，用户体验将非常糟糕。 导致这个问题的根本原因 阅读全文
摘要：
浏览器从服务器访问网页时获取的 JavaScript、CSS 资源都是文本形式的，文件越大网页加载时间越长。 为了提升网页加速速度和减少网络传输流量，可以对这些资源进行压缩。 压缩的方法除了可以通过 GZIP 算法对文件压缩外，还可以对文本本身进行压缩。 浏览器从服务器访问网页时获取的 JavaSc 阅读全文
摘要：
为什么需要提取公共代码 为什么需要提取公共代码 大型网站通常会由多个页面组成，每个页面都是一个独立的单页应用。 但由于所有页面都采用同样的技术栈，以及使用同一套样式代码，这导致这些页面之间有很多相同的代码。 如果每个页面的代码都把这些公共的部分包含进去，会造成以下问题： 相同的资源被重复的加载，浪费 阅读全文
摘要：
从前面的配置看来选项很多，Webpack 内置了很多功能。 你不必都记住它们，只需要大概明白 Webpack 原理和核心概念去判断选项大致属于哪个大模块下，再去查详细的使用文档。 通常你可用如下经验去判断如何配置 Webpack： 想让源文件加入到构建流程中去被 Webpack 控制，配置 entr 阅读全文
摘要：
除了通过导出一个 Object 来描述 Webpack 所需的配置外，还有其它更灵活的方式，以简化不同场景的配置。 下面来一一介绍它们。 除了通过导出一个 Object 来描述 Webpack 所需的配置外，还有其它更灵活的方式，以简化不同场景的配置。 下面来一一介绍它们。 导出一个 Functio 阅读全文
摘要：
之前的章节分别讲述了每个配置项的具体含义，但没有描述它们所处的位置和数据结构，下面通过一份代码来描述清楚： 之前的章节分别讲述了每个配置项的具体含义，但没有描述它们所处的位置和数据结构，下面通过一份代码来描述清楚： const path = require('path'); module.expor 阅读全文
摘要：
其它配置项 其它配置项 除了前面介绍到的配置项外，Webpack 还提供了一些零散的配置项。下面来介绍它们中常用的部分。 Target JavaScript 的应用场景越来越多，从浏览器到 Node.js，这些运行在不同环境的 JavaScript 代码存在一些差异。 target 配置项可以让 W 阅读全文
摘要：
devServer devServer 1-6 使用DevServer 介绍过用来提高开发效率的 DevServer ，它提供了一些配置项可以改变 DevServer 的默认行为。 要配置 DevServer ，除了在配置文件里通过 devServer 传入参数外，还可以通过命令行参数传入。 注意只 阅读全文
摘要：
Plugin Plugin Plugin 用于扩展 Webpack 功能，各种各样的 Plugin 几乎让 Webpack 可以做任何构建相关的事情。 配置 Plugin Plugin 的配置很简单， plugins 配置项接受一个数组，数组里每一项都是一个要使用的 Plugin 的实例，Plugi 阅读全文
摘要：
Resolve Resolve Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块，Resolve 配置 Webpack 如何寻找模块所对应的文件。 Webpack 内置 JavaScript 模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你也可以根据自己的需要修改默 阅读全文
摘要：
Module Module module 配置如何处理模块。 配置 Loader rules 配置模块的读取和解析规则，通常用来配置 Loader。其类型是一个数组，数组里每一项都描述了如何去处理部分文件。 配置一项 rules 时大致通过以下方式： 条件匹配：通过 test 、 include 、 阅读全文
摘要：
Output output 配置如何输出最终想要的代码。 output 是一个 object ，里面包含一系列配置项，下面分别介绍它们。 filename output.filename 配置输出文件的名称，为string 类型。 如果只有一个输出文件，则可以把它写成静态不变的： 但是在有多个 Ch 阅读全文
摘要：
Entry Entry entry 是配置模块的入口，可抽象成输入，Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块。 entry 配置是必填的，若不填则将导致 Webpack 报错退出。 context Webpack 在寻找相对路径的文件时会以 context 为根 阅读全文