（一）webpack安装使用

官网：webpack

本系列文章是我在学习的过程中的一些实操笔记，方便自己看，也欢迎大家参考，这些基本上就是webpack的使用方法了，一些拓展的内容就没有再延伸，都可以百度到，如果有什么问题欢迎指正哦。

一. 了解webpack工作原理

》树结构:在一个入口文件中引入所有资源，形成所有依赖关系树状图

》模块:模块就是模块可以是ES6模块也可以是commonJS或者AMD模块，对于webpack来说，所有的资源(css,img...)

》chunk:打包过程中被操作的模块文件叫做chunk,例如异步加载一个模块就是一个chunk

》bundel: bundle是最后打包后的文件,最终文件可以和chunk长的一模一样;但是大部分情况下他是多个chunk的集合

》为了优化最后生产出的bundle数量可能不等于chunk的数量，因为有可能多个chunk被组合到了一个Bundle中。

二. webpack安装体验

1. 创建项目目录：webpack-demo
2. 进入目录初始化NPM操作：npm init -y（成功之后会自动生成一个package.json文件，这里采用自动生成，也可手动配置里面的属性）
3. 安装webpack及webpack-cli：npm install webpack webpack-cli -D（首次使用此命令可能个后续的命令会报错，建议在之前先安装一个全局的，用webpack -v检查是否安装成功）
4. 在目录中建一个src文件夹，在文件夹里新建几个模块文件(one.js、two.js)以及主入口文件(index.js)，在index中引入模块文件
5. 在控制台运行命令打包：webpack -mode development（开发环境）
   在控制台运行命令打包：webpack -mode production（生产环境）
   （默认对入口文件index进行打包，执行成功后会在项目下自动创建一个dist文件夹，打包后的文件默认名main.js，这里面就包含了index里所有的内容）
   
   注：开发环境打包后会带有注释等一系列内容供开发人员使用；生产环境占用空间更小，适用于项目发布时用
6. 可以使用node运行打包后的资源，也可以用HTML引入打包后的资源使用