花了一两天回顾了下 webpack 各个配置的作用,简单记录下。
主要阅读列表：
http://webpack.wuhaolin.cn/(有强制广告,用charles代理可以去掉，但还是建议买书支持)
http://imweb.io/topic/5a4451c3a192c3b460fce366
http://taobaofed.org/blog/2016/09/09/webpack-flow/ https://lihuanghe.github.io/2016/05/30/webpack-event.html

一、webpack 背景

1、面临的问题

前端模块思想的普及，vue、less 等各种框架工具的出现，让前端开发效率更高，但是这些框架和工具的源码都不能直接跑在浏览器或者服务端，需要转化构建。

2、解决的手段
构建需要把源代码转化成可直接在终端上运行的 html、css、js, 具体需要实现的功能如下：

• 代码转换：ts 转换成 js,less 转换成 css
• 文件优化：压缩js、css、html,合并图片
• 代码分割：提取多个页面的公共代码，提取首屏不需要的部分让其异步加载(不熟悉这个功能)
• 模块合并：把模块分类，合并成一个文件
• 自动刷新：监听本地源代码的变化，可以做到热替换模块
• 代码校验：在提交代码到远程仓库之前用 eslint 检验代码是否符合规范、是否通过单元测试
• 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统

二、webpack的构建流程

1、概念

在 webpack眼里，一切皆模块,一般一个模块就是指一个文件， 所有模块(文件)构建后都会打包为最终的 js,html,css,image,如下图所示：

2、有哪些配置项

webpack 的配置项一般放在 项目下的 webpack.config.js 里，用一个 object对象 来描述所有配置信息，如下：

• Entry：配置打包文件入口，可以是一个或者多个文件
• Output：配置输出文件名、文件路径
• Module：用来配置模块的读取和解析规则，即打包过程中规定什么类型、什么路径的的模块用哪个 loader 来解析，常用 loader 有babel-loader(把 es6代码转换成 es5)
• Resolve：配置如何寻找模块对应的文件，可以规定寻找文件时补全后缀的规则，规定寻找文件的默认路径别名等等
• Plugin：扩招 webpack 构建中各个阶段的功能，比如webpack-parallel-uglify-plugin(压缩代码)、extract-text-webpack-plugin(提取 js 中的 css 到单独的 css 文件中)

3、构建流程

1）粗略构建流程如下：
A.Webpack 启动后会从Entry里配置的Module开始递归解析 Entry 依赖的所有 Module。
B.每找到一个 Module， 就会根据配置的Loader去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。
C.这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。
D.最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。
2) 详细构建流程如下：

三、具体怎么配置：webpack4

有了 parcel 的竞争，webpack 推出了配置量极小的 webpack4，配置方法可以参考：
1、webpack的简单配置

2、webpack 官方 API