前言
为什么要使用构建工具?
-
JavaScript和CSS的依赖问题
① 在开发中，经常出现的另一个问题，就是JavaScript和CSS的依赖问题；简单的说就是JavaScript和CSS的在页面中的顺序问题。经常会造成CSS没起作用，JavaScript的某个变量和方法找不到。
② 有很多情况都是因为引入JavaScript或者CSS的顺序不对，虽然我们可以使用一些RequireJS之类的模块管理，但是依然在很多情况下需要引入不同的文件，尤其是CSS没有一个好的模块化管理的组件。
③ 那么我们就需要有一个统一的地方来管理JavaScript和CSS的顺序问题，而构建工具可以大大减少此类问题。 -
性能优化
一般浏览器请求的文件越多越耗时，请求的文件越大越耗时，尤其是为了前端项目的代码更清晰，结构更合理，我们采用了MVC，MVVM等很多架构分解出了很多JS文件，无疑又拖慢了网页的速度。为了解决这个问题，一般会采用以下两个方案：
① 文件合并- 浏览器需要下载多个JS文件，而浏览器是有并发限制，也就是同时并发只能下载几个文件
- 假如浏览器并发数是5，你有30个JS文件，而每5个需要2S, 那么你光下载JS文件都需要12S
- 那么网页的性能可想而知，所以我们需要合并多个文件以减少文件的数量
② 文件压缩
- 我们知道文件越大，下载越慢，而针对JavaScript和CSS，里面的空格，换行这些都是为了让我们读代码时更容易阅读，但是对机器来说，这些对它没有影响
- 所以为了减少文件大小，一般的情况我们都会用工具去掉空格和换行，有时候我们还会用比较短的变量名(记住这个要让工具最后压缩时做，而源代码一定要保证命名可读性) 来减少文件大小。
- 而所有的前端构建工具都具有文件合并和压缩的功能
-
提高开发效率
① Vendor前缀
在CSS3使用越来越多的时候，我们都知道一些CSS3的新特性，在不同的浏览器中，CSS有不同的前缀，如果我们手工添加将会很繁琐，而如果使用构建工具，很多构建工具可以自动给我添加CSS的Vendor前缀。
② 单元测试
JavaScript的单元测试在使用MVC或者MVVM的框架后，变得越来越容易，而单元测试是质量保证的一个很重要的手段，所以在提交之前，使用构建工具自动跑一遍我们的单元测试是非常有必要的，能进一步检测你的项目的健壮性和容错能力。
③ 代码分析
我们写的JavaScript很多时候会有一些潜在的bug, 比如忘了添加分号，某个变量没有等等，使用一些JavaScript的代码分析工具，可以很好的帮我们检查一些常见的问题。
④ 版本升级
比如第一版本使用npm之类来引用前端JavaScript和CSS的第三方库，那么如果版本升级，添加移除等都用手工来修改HTML的话，一来耗时二来容易出错，尤其是开发版本和生产版本之间切换会有很多问题，那么使用前端构建工具可以很好的解决这些问题。
常见的前端构建工具
Gulp、Grunt、Webpack
什么是webpack?
-
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
-
WebPack可以看做是模块打包机（bundler）
① 它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
② 在webpack的概念中，前端的所有资源文件（js/css/json/img/sass/less/…）都会作为模块来被处理，webpack会根据模块的依赖关系进行静态分析，生成对应的静态资源，最终打包部署上线。
③ webpack干的工作就如下图所示
- 目的：把源代码转换成能够发布到线上的、可执行的JS代码、CSS代码、HTML代码
- 包括
① 代码转换：把TypeScript、Dart等编译成JS、Stylus等编译成CSS
② 代码分割：提取多个界面的公共代码，提取不需要立马执行部分的代码让其异步加载
③ 文件优化：压缩HTML、CSS、JS代码，合并JSON、图片等资源
④ 代码校验：在代码被提交到仓库之前，校验代码是否符合规范、单元测试是否通过
⑤ 模块合并：模块化开发的项目会有很多模块和文件，需要分类型把模块合并到一个文件
⑥ 自刷新：自动监听本地源代码的变化，重新构建、刷新浏览器
⑦ 自发布：代码更新完成后，自动构建出线上发布代码并输出到代码发布系统 - 总结：
① 构建是自动化、工程化思想在大前端开发中的一种体现
② 致力于把一系列流程用代码实现，并让代码自动化的执行这一系列复杂的流程
③ 构建使前端开发变得更自动化、很大程度上减轻了我们的工作量
-
WebPack、Grunt、Gulp
① 区别- Gulp/Grunt是一种能够优化前端的开发流程的工具是基于 task 任务的
- 而WebPack是一种模块化的解决方案，是基于整个项目进行构建的
- 不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具
② Grunt和Gulp的工作方式
在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
图示
③ Webpack的工作方式
把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
图示
铺垫性知识
loader
- webpack本身只能加载js/json模块，如果要加载其它类型的文件/模块, 就需要使用对应的loader进行转化和加载。
- loader 可以将所有类型的文件转换为webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
- loader自身也是运行在node.js环境中的JavaScript模块，其本身是一个函数，接收源文件作为参数，返回转化的结果。
- loader一般以 xxx-loader 的方式命名，xxx代表了这个loader要做的转化功能，比如：css-loader，json-loader等。
插件
- loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。
- 插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。
- 插件接口功能极其强大，可以用来处理各种各样的任务。
- 和loader的区别
① 可以完成一些loader不能实现的功能；
② 使用插件一般在webpack的配置信息plugins选项中指定
③ UglifyJSPlugin: 压缩js文件
④ HtmlWebpackPlugin: 自动生成HTML文件
⑤ CleanWebpackPlugin: 自动清除指定文件夹资源
webpack安装的两种方式
- 运行
npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令 - ① 首先在项目目录的cmd中执行
npm init -y初始化package.json
② 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中✔✔✔推荐 - 执行
npm i webpack-cli --save-dev
注意：--save-devdev是开发过程中使用的，生产依赖
使用webpack
npm init -y使用该命令可以自动新建package.json
- 在package.json中，记录着项目的一系列信息。例如：名字、版本、描述、入口文件等
- 在项目中局部安装webpack，使用
npm i webpack --save-dev命令。
- 安装完成后，在系统目录下会生成
node_model文件夹，在package.json中会产生依赖。
- 安装
webpack-cli使用webpacknpm i webpack-cli --save-dev
案例实操1
项目结构
流程
-
安装jQuery
npm i jquery --save
-
在index.html中引入index.js
-
在
index.js中引入jQuery
-
根据奇偶取元素，设置背景色
-
运行会报错，因为浏览器无法识别高级语法。
-
使用打包命令
webpack src/js/index.js --output dist/js/bundle.js --mode development。该命令是将main.js 在转换为浏览器可识别的bundle.js
命令的意思是讲某js文件打包为bundle.js
-
直接在html中引入bundle.js文件即可使用
补充：npx
- 作用：会执行node_modules对应的bin下的webpack.cmd
npx webpack - 概念：
① npm v5.2.0引入的一条命令(npx)，引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。
② npx 会自动查找当前依赖包中的可执行文件，如果找不到，就回去PATH中找。如果依然找不到，会自动安装。 - 主要特点
① 临时安装可执行依赖包，不用全局安装，不用担心长期的污染。
② 可以执行依赖包中的命令，安装完成自动运行。
③ 自动加载node_modules中依赖包，不用指定$PATH.
④ 可以指定node版本、命令的版本，解决了不同项目使用不同版本的命令的问题。
使用npx打包项目
使用npx进行打包的时候，index.js不能放在js目录下，要放在src目录下。
直接使用npx webpack进行项目打包
案例实操2——多个js和json，打包运行
-
编写
Util.js并在index.js中引入
-
使用
npx webpack对项目进行打包
-
即可运行
-
新建
data.json文件
-
在index.js中引入，并在界面中输出json文件数据
-
重新使用
npx webpack进行构建，即可运行
使用配置文件打包js文件和json
- 在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，所以 配置文件比在终端(terminal)中手动输入大量命令要高效的多。
- webpack.config.js中需要向外暴露的内容
- 新建 webpack.config.js 文件，写入相关配置信息，在终端直接执行webpack即可打包，如下图所示：
const path = require('path'); module.exports = { entry:'./src/index.js', // 入口 output:{ // 出口文件 filename:'bundle.js', // 出口绝对路径 __dirname:当前项目根目录 path:path.resolve(__dirname,'dist'), }, // 出口文件、出口路径等 devServer:{ }, // 开发服务器，自动更新 module:{}, // 模块配置 plugins:[], // 插件配置 mode:'development', // 更开模式（development 开发模式 production 生产模式） resolve:{ }, // 配置解析 };
打包项目中的CSS文件
设置入口以及出口文件、目录等，可以将js文件、json文件等进行打包，但是无法打包css、图片等。需要借助loader进行打包。
① 安装style-loader、css-loadernpm i style-loader css-loader -S-dev
② 在webpack.config.js中的module中，配置loader选项规则数组，引入loader
③ 在入口文件index.js中引入css文件
④ 使用webpack重新打包即可打包css文件
打包项目中的LESS文件
- 安装LESS
- 安装
less-loader
- 在入口文件index.js中引入less
- 在
webpack.config.js中配置less.loader
- 使用
webpack命令即可打包成功
打包项目中的图片文件
-
安装并添加 file-loader 模块
npm install file-loader --save-dev -
进入webpack.config.js中配置loader选项
-
引入图片文件，在index.html中创建标签，在css文件中的样式里面使用图片背景，执行webpack打包到bundle.js文件
{ test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', query: { name: 'img/[name]-[hash:5].[ext]' } }, ], },
总结
通过上面的操作，我们可以了解到，如果要加载其它的资源，只需要配置好相应的loader，然后统一打包到bundle.js文件中运行即可。
自动编译打包
webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。
安装
npm install --save-dev webpack-dev-server
修改配置文件
在webpack.config.js告诉开发服务器(dev server)，在哪里查找文件：
package配置
增加 “start”: “webpack-dev-server --open” 选项。
图示
编译打包应用并运行
npm start
注意
当功能开发完毕后，关掉服务器，执行webpack打包成本地文件即可。
webpack中各种插件的使用
HtmlWebpackPlugin
该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。
安装
npm install --save-dev html-webpack-plugin
配置
图示
使用
删除掉原先打包编译生成的dist文件夹，重新执行webpack，该插件会自动根据指定的模板页面帮助我们创建index.html文件，并做好相关配置引入
