1、自动化构建工具 -> 构建打包，使开发者更专注于“开发” -> 常用webpack、Gulp、Fis3(百度)；
构建工具选择：团队技术栈、项目需求、生态圈是否完善，社区是否活跃等；
(1).基于任务运行的工具：Grunt(目前很少用到)、Gulp；
(2).基于模块化打包的工具：Browserify、Webpack、rollup.js；
(3).整合型工具：Yeoman、FIS、jdf、Athena等;//其使用了多种技术栈实现的脚手架工具，优点是即开即用，缺点是约束了技术选项，学习成本较高；
- - - >>> webpack与gulp的异同：webpack更适合大型项目的构建，gulp适合小型项目(大型也OK)
(1).它们都通过插件扩展，完整好用不失灵活，社区活跃，良好的开发体验；
(2).webpack -> module bundle;//模块打包器 -> 聚焦点：所有的文件都是模块；
(3).gulp -> runner Task;//任务运行器 -> 聚焦点：工作流程、流操作；
- - - >>>自动化构建工具：代码压缩、模块合并、自动刷新等
2、Webpack -> 其支持CommonJs，AMD以及ES6模块化规范;->ES6区别于其它规范，其采用的是import引入模块，其它require引入模块; ->webpack中使用规范建议：若使用import，便都使用import，若使用require(),便都使用require();不要混合使用；
- - - >> Vue，React框架底层使用的自动化构建工具是webpack；
其进行打包处理 -> 必然需要模块化处理代码
(1).webpack聚焦点 ->入口entry、出口output、转换器loader、插件plugins
使用流程：安装node(其自带npm) -> npm install webpack webpack-cli -g;//全局安装 -> npm init;//初始化项目,生成package.json; -> npm install webpack webpack-cli --save-dev;//局部安装 ->执行webpack->报错和警告->配置入口文件->shell语句+配置文件 ->执行webpack命令，其便会根据配置文件进行打包处理 ->每次更改页面内容，其都需要执行webpack命令 -> 可执行webpack --watch;//开启监听,页面内容更改，其会自动打包，但页面依旧需要手动刷新 -> npm install webpack-dev-server安装服务器，页面在localhost://xxxx打开，页面内容更改，其会自动刷新 ->后期聚集点主要是配置文件中的loader、plugins;// 拿到新文件后：npm install；webpack;打包；webpack-dev-server;开启服务器
- - - >>> 过程详解
[1].安装最新webpack4 -> node版本6以上才OK;( window+R -> cmd -> node-v 查看版本)；
[2].webpack-cli：接口处理；webpack4对其进行了拆分，所以webpack webpack-cli 都要安装-> webpack4以下版本直接 npm install webpack -g即可;(webpack-cli已经打包在webpack内部)
[3].npm init -> 生成package.json文件 -> 关于"项目介绍"；
[4].npm install webpack webpack-cli --save-dev;//局部安装 -> 局部安装的原因：避免传输过程中对方与你的webpack版本有差异，生成的package.json文件有相关的webpack版本信息，建议全局、局部都进行安装，--save表示环境变量为“生产者环境”，其需要的依赖较少； -dev表示环境变量为"开发者环境"，该环境下还需要开发时的“测试”依赖，--save-dev表示的就是开发者环境，底层应该是生产者环境+-dev表示的便是“开发者环境”， 其也可以写在前面 npm install --save-dev webpack webpack-cli; 省略写法 -> npm install webpack webpack-cli -D; 同理 npm install -g webpack webpack-cli;也可将-g提前；
- - - >>> 安装后生成package-lock.json, node_modules,同时package.json文件会出现“webpack版本信息”，package-lock.json文件中是关于“依赖模块/插件的URL地址”，node_modules中关于“项目即webpack依赖的模块”；若你进行文件传输给其他开发人员时，由于node_modules包内容较大，传输过程很慢，你可以采取不传输此包，其他开发人员接收到文件后只需要执行npm install，系统便会自动下载“相关依赖的模块”；(根据用到的工具下载相关的依赖模块)
[5].局部安装完成后，执行webpack报错原因：webpack4默认入口文件.src/index.js,若是没有便会报错，webpack4版本前其是根据配置文件执行，没有默认的入口文件，所以也不会报错；警告的原因：缺环境变量 -> webpack4中最好提前设置环境变量，"development";//开发环境，"production";//生产环境；执行webpack -mode=development;//警告消失，后续可直接在配置文件中设置；
[6].shell语句 -> 命令行中执行的语句，例如npm install webpack webpack-cli -g, npm init等；配置文件 -> webpack根据配置文件进行打包；
[7].安装服务器：npm install webpack-dev-server -D；安装(若是有问题，npm install wbpack-dev-server-g 全局再安装一次)，执行webpack-dev-server;//(无空格) 开启服务器 -> localhost:8080; ->页面内容更改，其会实时更新； - - - >>> webpack-dev-server -hot;//模块热替换，其只更新数据变化的部分，而不是把整个页面都进行更新，提升性能；
[8].loader解释器：webpack只识别js文件，其它(css,html,js[es6])都需要loader解释器进行转换，或者使用插件转换；npm安装相应loader解释器 -> 配置文件进行相关配置 -> 执行webpack
[9].plugin插件：npm安装相应的插件 -> 配置文件中引入该插件 -> 相关配置 ->执行webpack即可使用，相比于loader解释器(其根据模块之间的依赖关系)，插件使用更加独立；
常用插件：npm install html-webpack-plugin -D;//html页面相关；npm install uglifyjs-webpack-plugin -D;//压缩代码插件；npm install mini-css-extract-plugin -D;//转换css插件
补充：
[1].学习webpack之前下载nodejs以及git：nodejs中包含npm包管理工具，git的下载就是执行shell命令更加便捷，下载git后，你可直接打开项目目录，鼠标右键选择"Git Bash Here"便可执行shell命令，当然你也可以选择使用window+R开启命令行执行shell命令，但是此种方式需要进入到项目目录下才OK，这就是git使用更加便捷的原因了；git环境等同于linux环境，webpack以及后续所学gulp中都会存在些linux命令，此命令在git环境中的命令行才能设置成功，window操作系统中的命令行不能成功设置，-> 这两点就是git和系统命令行的区别了，“经验型小坑~”
[2].npm是包管理工具，使用其下载速度会较慢，你可以选择使用cnpm(国内淘宝镜像)，其做了层代理，执行速度较快，但是webpack使用过程中，若使用npm,则一直使用npm,若使用cnpm，便一直使用cnpm,两者不要混合使用,容易出现"莫名bug"；后续可了解Yarn包管理工具(依赖管理器)，其更加轻量；[3].工程化中 “模块”就是“包”；[4].npm install webpack --save-dev;可简写为npm i webpack -D;//-D可前置 npm i -D webpack;
- - - - - - >>> 项目介绍
(2).项目名称：避免使用"webpack"或与webpack有紧密联系的词，例如loader,plugin等；
[1].package.json文件 -> 例如 "^8.0.4";//表示最大版本为8版本(大版本为8，聚焦点为8的前缀，并非8.0.4的前缀)，区间：最低版本是8.0.4,最高版本为8.9.9，但是不能到达9版本；
[2].webpack.config.js配置文件：其是默认名，可取其它名字而且配置文件可写多个，执行的时候shell语句 -> webpack --config=配置文件名，webpack便会根据相应配置文件操作；
入口、出口、环境变量、配置服务器、配置loader、配置plugin：
配置loader：
配置plugins插件：
网友评论