基础篇——webpack与构建发展简史（一）

  有段时间没有写简书了，正好最近正在学习webpack，推荐极客时间---玩转webpack
)跟着腾讯高级搞开发工程师---程柳锋学习webpack，顺便做一下笔记。

1.课程目录

TIM截图20200715142928.png

2.内容综述

TIM截图20200715142732.png

3.为什么需要构建工具

TIM截图20200715143220.png

4.前端构建演变之路

TIM截图20200715143708.png

5.为什么选择webpack

TIM截图20200715144408.png

除了上图说的这几点，还有如下几点：

1. webpack社区生态丰富；
2. 配置灵活和插件化扩展；
3. 官方更新迭代速度快。

6.初识webpack

（1）配置文件

webpack默认配置文件：webpack.config.js，可以通过webpack --config指定配置文件

（2）webpack配置组成

TIM截图20200715145440.png

（3）零配置webpack包含哪些内容？ TIM截图20200715145633.png

webpack4.0出来以后，宣称不用配置webpack文件，也可进行webpack打包，主要是对entry和output做了默认的设定，对mode、module、plugins未做设定。

7.环境搭建

（1）安装Node.js和NPM

TIM截图20200715151202.png

（2）安装webpack和webpack-cli

TIM截图20200715151423.png

8.一个简单的例子

TIM截图20200715152113.png
使用./node_modules/.bin/webpack运行打包

9.通过npm script 运⾏ webpack

  通过上面的例子我们看到，每次运行打包的时候，都会输入./node_modules/.bin/webpack命令，显得过于臃肿，有没有更简单的方法呢？答案是肯定的，我们通过配置package.json配置运行命令

TIM截图20200715153348.png

10.总结

  这一章节主要是讲了前端构建的发展历史、webpack的基本安装和使用，下一章节，主要学习webpack的基础概念、介绍webpack的entry、module、loader、plugin、以及代码压缩、文件指纹、热更新的技巧。