这是我参与「第四届青训营 」笔记创作活动的的第5天。
前言
webpack是前端资源构建工具+静态模块打包器。学习前端，我想webpack是绕不开的，本篇笔记用于介绍和入门webpack
webpack产生背景
前端项目由图片、js文件、less文件、vue文件、ts文件等等组成，在早期写页面我们需要手动管理这些文件，在页面上一个个引入，过程繁琐。当文件有依赖的时候，还得严格按照顺序来写。开发和生产的环境一致，我们接入新特性可能在某些生产环境不兼容，而且难以接入less、sass等工具。js、图片和css资源管理模型不一致。所以出现了很多工程化工具，webpack更是其中的佼佼者。
什么是webpack
webpack是前端资源构建工具+静态模块打包器。
1.前端资源构建工具：就是把一些浏览器不支持的文件比如less，sass，转换成浏览器支持的css这样的工具。
2.静态模块打包器：告诉webpack入口文件，webpack会根据页面依赖引用（比如import）的jquery，less文件形成树状管系图，形成一个chunk（代码块），然后再对代码块进行各项处理。比如less转成css，es6+转浏览器认识的es5，等等操作，这些操作就是打包。打包后，把处理好的资源输出出去，形成bundle。
入门学习方向
-
理解打包流程
-
熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 Webpack 环境
-
掌握常见脚手架工具的用法，例如:Vuo-cli、create-react-app、@angular/cli 进阶
-
理解Loader、Plugin机制,能够自行开发Webpack组件
-
理解常见性能优化手段,并能用于解决实际问题
-
理解前端工程化概念与生态现状 大师级
-
阅读源码,理解Webpack编译、打包原理,甚至能够参与共建
webpack的应用
webpack的使用基本都围绕着“配置”，而配置大概可分为流程类和工具类两类：
i. 流程类
ii. 工具类
“配置”的知识点较繁杂，使用频率较高的有：
- entry/output
- module/plugins
- mode
- watch/devServer/devtool
loader和plugin的作用
1、loader
用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或者将内联图像转换为data URL。比如说：CSS-Loader，Style-Loader等。
2、plugin
目的在于解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。
webpack的核心概念
1、Entry：入口(Entry)指示 Webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
2、Output：输出(Output)指示 Webpack 打包后的资源 bundles 输出到那里去，以及如何命名。
3、Loader：Loader 让 Webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能理解JavaScript）
4、Plugins：插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
5、mode：模式(Mode)指示 Webpack 使用相应模式的配置。
