这是我参与「第五届青训营 」笔记创作活动的第7天。
webpack是什么
从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。
为什么要学习webpack
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉webpack，某种程度上可以成为个人的核心竞争力。
- 高阶前端必经之路
注：webpack只认识js文件，其他文件解析需要用到loader
webpack关键知识点
- 基础配置：entry、context、output、mode、target、module、plugins
- 工具类配置：devTool、devserver、watch、tree-shaking
- 场景化：学习vue-cli脚手架特性、学习create-react-app脚手架特性、如何优化编译性能、如何优化产物性能
- 掌握常用Loader
- 掌握常用Plugin
webpack的安装
（wepack为了正常运行必须依赖node环境，而node环境为了可以正常的执行，必须使用npm工具管理node中各种依赖的包）
因此安装webpack首先要安装Node.js，Node.js自带了软件包管理工具npm
全局安装webpack（npm install webpack -g）
局部安装webpck（npm install webpack --save-dev）–save-dev是开发时依赖，项目打包后不需要继续使用。
webpack的配置
1、文件和文件夹解析
dist文件夹：用于存放之后打包的文件 src文件夹：用于存放我们写的源文件 main.js：项目的入口文件。 mathUtils.js:定义了一些数学工具函数，可以在其他地方引用，并且使用。 index.html: 浏览器打开展示的首页html（在这里引用的是src内最终打包的文件即dist文件夹的内容）。 package.json：通过npm init生成的，npm包管理的文件。 以下为mathUtils.js文件和main.js文件中的代码：（CommonJS模块化规范，CommonJS是模块化的标准，nodejs就是CommodJS（模块化）的实现）
2、 命令
webpack ./src/main.js ./dist/bundle.js(将main.js文件打包成bundle.js文件)
总结
webpack是现在工程化的必用技术，我们常常开发离不开他。所以我们掌握webpack是一个很有必要的事情。
