这是我参与「第五届青训营」伴学笔记创作活动的第13天，学习webpack有关知识体系
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。为什么要深入掌握webpack呢？在日常开发中，我们需要同时兼顾PC、H5等各类不同分辨率的网页开发。因此需要针对不同应用场景做不同的打包，如针对PC端中后台应用，我们需要支持单页应用的打包构建。而H5页面通常对性能和可访问性有着极高的要求，因此需要通过构建来支持服务端渲染和PWA离线缓存。
为什么需要构建工具
- 转换ES6语法
- 转换JSX等
像主流的框架React、Vue的语法糖，浏览器无法直接去识别它们，所以也需要使用构建工具转换 - CSS 前缀补全/预处理器
如LESS、SASS等预处理器 - 代码压缩混淆
- 图片压缩
模块打包工具
模块打包工具（module bundler）的任务就是解决模块间的依赖，使其打包后的结果能运行在浏览器上。它的工作方式主要分为两种：
- 将存在依赖关系的模块按照特定规则合并为单个JS文件，一次全部加载进页面中。
- 在页面初始时加载一个入口模块，其他模块异步地进行加载
五个核心概念
- entry：入口指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。
- output：输出指示webpack打包后的资源bundles输出到哪里去，以及如何命名。
- loader：loader让webpack能够去处理那些非Javascript文件（webpack自身只理解JavaScript）。
- plugins：插件可以用于执行范围更广的任务。插件的范围包括，从打包优化到压缩，一直到重新定义环境的变量等。
- mode：指示webpack使用相应模式的配置（development、production）。
安装
我们需要使用Node.js的包管理器npm来安装Webpack。安装模块的方式有两种：一种是全局安装，一种是本地安装。
全局安装Webpack的好处是npm会帮我们绑定一个命令行环境变量，一次安装、处处运行；本地安装则会添加其成为项目中的依赖，只能在项目内部使用。这里建议使用本地安装的方式，主要有以下两点原因：
- 如果采用全局安装，那么在与他人进行项目协作的时候，由于每个人系统中的Webpack版本不同，可能会导致输出结果不一致。
- 部分依赖于Webpack的插件会调用项目中Webpack的内部模块，这种情况下仍然需要在项目本地安装Webpack，而如果全局和本地都有，则容易造成混淆。
首先新建一个工程目录，从命令行进入该目录，并执行npm的初始化命令：
npm init
// or
yarn init
然后根据提示操作。我们会看到目录中生成了一个package.json文件，它相当于npm项目的说明书，里面记录了项目名称、版本、仓库地址等信息。
接下来执行安装Webpack的命令：
npm install webpack webpack-cli –-save-dev
webpack是核心模块，webpack-cli则是命令行工具。
安装结束之后，在命令行执行 npx webpack-v 以及 npx webpack-cli-v，可显示各自的版本号，即证明安装成功。
