简介 以下仅为个人粗略总结和代码，看不懂的稍加理解，本文主要用做个人记录。 先大致总结一下 1.从哪里开始：webpack根据入口模块开始。 2.如何进行：递归读取每个文件，会形成一个依赖列表，依赖列表的，依赖列表是一个以文件相对路径为key，文件内容为value的对象。 3.如何处理：对于每个文件会通过AST解析语法树，返...

浏览器从服务器访问网页时获取的JavaScript，css资源都是文本形式的，文件越大网页加载时间越长。 为了提升网页加速速度和减少网络传输流量， 可以对这些资源进行压缩。 压缩的方法除了可以通过GIZP算法对文件压缩外，还可以对文本本身压缩。

为什么要区分环境 在开发网页的时候，一般都会有多套运行环境，例如： 在开发过程中方便开发调试的环境。 发布到线上给用户使用的运行环境。 这两套不同的环境虽然都是由同一套代码编译而来，但是代码内容却不一样，差异包括： 线上代码经过压缩处理开发用的代码包含一些用于提示开发者的提示日志，这些日志普通用户不可...

webpack官方提供了两大模块，一个是核心的webpack，一个是webpack-dev-server扩展模块。而文件监听功能是webpack模块提供的。

搜索引起无法收录你的网页，因为展示的数据都是在浏览器端异步渲染出来的，大多数爬虫无法获取到这些数据。对于复杂的单页应用，渲染过程计算量大，对低端移动设备来说可能有性能问题，用户能明显感知首屏的渲染延迟。

在实际应用中一个完整的系统不会把所有的功能都做到一个网页中，因为这会导致网页性能不佳。实际的做法是按照功能模块划分成多个单页应用，每个单页应用生成一个HTML文件。之前我们解决了自动化生成HTML文件，接下来继续改造上一节的例子：

在事件项目中，一个页面常常有很多资源要加载，举出一个实战中的例子要求如下： 项目采用ES6语言加react框架； 给页面假如google analytics， 这部分代码需要内嵌进head标签里去。 给页面假如Disqus用户评论， 这部分代码需要异步加载以提升首屏加载速度。 压缩和分类JavaScript和css代码，提升加载速度。 以下是发布到...

TypeScript是JavaScript的一个 超集，主要提供了类型检查系统和对ES6语法的支持。但不支持新的API。目前没有任何环境支持运行原生的TS代码，必须通过构建把它转换成JavaScript代码后才能运行。

Babel可以方便的完成以上两件事情， Babel是一个JavaScript编译器，能将ES6代码转为ES5代码，让你使用最新的语言特性而不用担心兼容问题，并且可以通过插件机制根据求灵活的拓展。在babel执行编译的过程中，会从项目根目录下的.babelrc文件读取配置，其内容大致如下：

如果采用导出一个Object来描述webpack所需配置的方法需要写两个文件。一个用于开发环境，一个用于线上环境。再在启动时通过webpack --config webpack.config.js指定使用哪个配置文件。

webpack的整体配置结构 之前说过每个配置项的具体含义，但是没有描述他们所处的位置和数据结构，下面统一描述下： {代码...}

JavaScript的应用场景越来越多，从浏览器到Node.js，这些运行在不同环境的JavaScript代码存在一些差异。target配置项可以让webpack构建出针对不同运行环境的代码。target可以是以下之一：

上一章介绍过DevServer可以用来提高开发效率，它提供一些配置可以改变DevServer的默认行为。要配置DevServer除了在配置文件里通过devServer传入参数外，还可以通过命令行参数传入。注意只有在通过DevServer去启动webpack时配置文件里devServer才会生效，因为这些参数所对应的功能都是DevServer提供的，webpack本身并不认...

webpack在启动后会从配置的入口模块触发找出所有依赖的模块，Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能，默认会采用模块化标准里约定好的规则去寻找，但你可以根据自己的需要修改默认的规则。

Module module的配置如何处理模块。 配置Loader rules 配置模块的读取和解析规则， 通常用来配置loader， 其类型是一个数组， 数组里每一项都描述了如何去处理部分文件。 配置一项rules大致通过以下方式： {代码...} 例子： {代码...} 在loader需要传入很多参数的时候，我们还可以通过一个object来描述，如： {代码...} ...

webpack在寻找相对路径的文件时会以context为根目录，context默认为执行启动webpack时所在的当前工作目录。如果想改变context的默认配置，则可以在配置文件中这样设置：

看了网上一个教程，做些记录，从头学习一下webpack~关于安装之类的就不介绍了，首先了解下核心概念。感觉首先知道这些概念还是挺重要的。 核心概念 Entry：入口，webpack执行构建的第一步从Entry开始，可以抽象成输入。 Module：模块，在webpack中一切皆模块，一个模块对应着一个文件，webpack会从配置的Entry开始递归找...

建立lesson02项目，内容和上节lesson01一致，当用浏览器访问[链接]:8080/index.html时，修改任一html、css、js、图片文件，页面都会自动刷新。

注：在github上看到一篇比较好的webpack入门教程，本人也是为了加深印象以此记录。奉上原文地址：[链接]。 目标 建立一个lesson1项目，在项目中创建html, css, js， 图片等静态文件，编写webpack配置文件，然后生成如下页面。 要求 使用require引入jQuery， 切页面中药使用jQuery操作DOM. 输入npm run build能正确打包静...

注：在github上看到一篇比较好的webpack入门教程，本人也是为了加深印象以此记录。奉上原文地址：[链接]。 webpack产生背景 多js文件下全局对象的冲突； 模块的加载顺序问题； 解决模块或者库的依赖问题； 模块过多难以管理； webpack的作用 将所有依赖拆分成块且按需加载； 首屏加载耗时较少； 所有的静态文件都是一个...