git学习经验总结 - 2994189382/learn-three-git GitHub Wiki

在开发中，经常出现的另一个问题，就是JavaScript和CSS的依赖问题； 简单的说就是JavaScript和CSS的在页面中的顺序问题。

经常会造成CSS没起作用，JavaScript的某个变量和方法找不到。

有很多情况都是因为引入JavaScript或者CSS的顺序不对， 虽然我们可以使用一些RequireJS之类的模块管理， 但是依然在很多情况下需要引入不同的文件， 尤其是CSS没有一个好的模块化管理的组件。

那么我们就需要有一个统一的地方来管理JavaScript和CSS的顺序问题， 而构建工具可以大大减少此类问题。

(2) 性能优化

一般浏览器请求的文件越多越耗时，请求的文件越大越耗时， 尤其是为了前端项目的代码更清晰，结构更合理，我们采用了MVC， MVVM等很多架构分解出了很多JS文件，无疑又拖慢了网页的速度。

为了解决这个问题，一般会采用以下两个方案：

文件合并:

浏览器需要下载多个JS文件，而浏览器是有并发限制， 也就是同时并发只能下载几个文件，假如浏览器并发数是5，你有30个JS文件， 而每5个需要2S, 那么你光下载JS文件都需要12S。

那么网页的性能可想而知，所以我们需要合并多个文件以减少文件的数量。

文件压缩:

我们知道文件越大，下载越慢，而针对JavaScript和CSS，里面的空格， 换行这些都是为了让我们读代码时更容易阅读，但是对机器来说，这些对它没有影响。

所以为了减少文件大小，一般的情况我们都会用工具去掉空格和换行， 有时候我们还会用比较短的变量名(记住这个要让工具最后压缩时做， 而源代码一定要保证命名可读性) 来减少文件大小。

而所有的前端构建工具都具有文件合并和压缩的功能。

(3) 提高开发效率 Vendor前缀

在CSS3使用越来越多的时候，我们都知道一些CSS3的新特性， 在不同的浏览器中，CSS有不同的前缀，如果我们手工添加将会很繁琐， 而如果使用构建工具，很多构建工具可以自动给我添加CSS的Vendor前缀。

单元测试 JavaScript的单元测试在使用MVC或者MVVM的框架后，变得越来越容易， 而单元测试是质量保证的一个很重要的手段。

所以在提交之前，使用构建工具自动跑一遍我们的单元测试是非常有必要的， 能进一步检测你的项目的健壮性和容错能力。 代码分析

我们写的JavaScript很多时候会有一些潜在的bug,
比如忘了添加分号，某个变量没有等等， 使用一些JavaScript的代码分析工具， 可以很好的帮我们检查一些常见的问题。

版本升级

比如第一版本使用npm之类来引用前端JavaScript和CSS的第三方库， 那么如果版本升级，添加移除等都用手工来修改HTML的话。

一来耗时二来容易出错，尤其是开发版本和生产版本之间切换会有很多问题， 那么使用前端构建工具可以很好的解决这些问题。

常见的前端构建工具有Gulp、Grunt、Webpack等， 我们接下来一一学习和了解他们。

二、什么是webpack？

webpack是一个模块打包器（bundler）。

在webpack的概念中，前端的所有资源文件（js/css/json/img/sass/less/...） 都会作为模块来被处理，webpack会根据模块的依赖关系进行静态分析， 生成对应的静态资源，最终打包部署上线。

webpack干的工作就如下图所示:

我们先来了解下webpack需要的一些铺垫性知识： loader

webpack本身只能加载js/json模块，如果要加载其它类型的文件/模块, 就需要使用对应的loader进行转化和加载。

loader 可以将所有类型的文件转换为webpack 能够处理的有效模块， 然后你就可以利用 webpack 的打包能力，对它们进行处理。

loader自身也是运行在node.js环境中的JavaScript模块，其本身是一个函数， 接收源文件作为参数，返回转化的结果。

loader一般以 xxx-loader 的方式命名，xxx代表了这个loader要做的转化功能， 比如：css-loader，json-loader等。

插件

loader 被用于转换某些类型的模块， 而插件则可以用于执行范围更广的任务。

插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量。插件接口功能极其强大， 可以用来处理各种各样的任务。

可以完成一些loader不能实现的功能；

使用插件一般在webpack的配置信息plugins选项中指定

UglifyJSPlugin: 压缩js文件

HtmlWebpackPlugin: 自动生成HTML文件

CleanWebpackPlugin: 自动清除指定文件夹资源

2.1 初始化项目 在工程的目录结构下，新建webpack_demo工程文件，并进行初始化，如下所示：

安装webpack （先安装全局的webpack，后安装局部webpack）

项目初始化

2.2 打包项目中的js和json文件 （一) 新建单个js文件，如下图所示：

image.png 打开命令行执行打包代码：

打包成功后，你就可以引入bundle.js， 其执行效果和引入main.js一样，在开发过程中， 我们就可以把多个js文件都打包到bundle.js中， 这样客户端请求资源就由多次变成一次。

运行结果如下图所示：

（二）新建多个js和json文件，如下图所示:新建多个js文件，并在main.js中引入并调用。

运行结果：

新建多个json文件，并在main.js中引入并调用，如下图所示：

运行结果如下：

2.3 在webpack中使用配置文件

在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，所以 配置文件比在终端(terminal)中手动输入大量命令要高效的多。

新建 webpack.config.js 文件，写入相关配置信息，在终端直接执行webpack即可打包，如下图所示：

2.4 打包项目中的CSS文件

首先安装并添加 style-loader 和 css-loader 模块：

然后进入webpack.config.js中配置loader选项：

创建main.css文件，写入样式，并在main.js中引入，然后通过webpack命令打包，如下图所示：

运行结果如下：

2.5 打包项目中的图片文件

首先安装并添加 file-loader 模块：

然后进入webpack.config.js中配置loader选项：

引入图片文件，在index.html中创建标签，在css文件中的样式里面使用图片背景，执行webpack打包到bundle.js文件，如下图所示：

运行结果：

通过上面的操作，我们可以了解到，如果要加载其它的资源， 只需要配置好相应的loader，然后统一打包到bundle.js文件中运行即可。

接下来，我们思考一个问题： 在开发过程中，每增删改某一块内容，都需要打包后才能正常运行， 那我们能不能做到修改好动态打包运行呢？此时，借助服务器可以帮助实现这一操作。

2.6 自动编译打包

webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

(一) 下载安装

image (二） 修改配置文件

在webpack.config.js告诉开发服务器(dev server)，在哪里查找文件：

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。

(三） package配置

增加"start": "webpack-dev-server --open"选项。

(四）编译打包应用并运行

npm start

当功能开发完毕后，关掉服务器，执行webpack打包成本地文件即可。

2.7 webpack中各种插件的使用

在webpack中插件有很多，都是基于解决某一方面功能而产生的。大部分插件使用方式相同，我们可以做到举一反三。 （一） HtmlWebpackPlugin

该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。 安装：

在项目中引入，进入webpack.config.js文件中，增加如下配置：

删除掉原先打包编译生成的dist文件夹，重新执行webpack，该插件会自动根据指定的模板页面帮助我们创建index.html文件，并做好相关配置引入，如下图所示：

3人点赞 撩课-Web架构师专栏 "小礼物走一走，来简书关注我"

赞赏支持 还没有人赞赏，支持一下

撩课学院 “撩课学院”专注于 Web，Python，Java全栈等高品质编程教学 点击以下链接查看所... 总资产118 (约11.25元)共写了44.4W字获得1,325个赞共14,113个粉丝

关注

被以下专题收入，发现更多相似内容

程序员

让前端飞 推荐阅读 更多精彩内容 【Hybrid开发高级系列】WebPack模块化专题 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...

Kevin_Junbaozi 阅读 4,201 评论 0 赞 15

无标题文章 从V1迁移到V2由于使用的是webpack版本是2.2.1，所以针对原文做了一些修改。针对webpack2的修改部...

yzc123446 阅读 402 评论 0 赞 1 webpack知识点汇总 写在前面的话 阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较...

不忘初心_9a16 阅读 2,070 评论 0 赞 16

webpack2.x项目搭建入门实践教程

1. 新建一个文件夹,命名为 webpack-cli , webpack-cli 就是你的项目名,项目名建议使用小...

鲁大师666 阅读 621 评论 1 赞 3

webpack 从入门到工程实践 GitChat技术杂谈 前言 本文较长，为了节省你的阅读时间，在文前列写作思路如下： 什么是 webpack，它要...

萧玄辞 阅读 9,945 评论 10 赞 108

撩课学院

关注 总资产118 (约11.25元) 职场新手引导-Golang后端开发流程演示 阅读 168 新手引导 — Golang后端开发环境搭建 阅读 258 推荐阅读 《三生三世东凤续》二十七：追爱（上） 阅读 7,780 三生三世枕上书续写16 阅读 4,120 九生九世【天长帝九】（十九） 阅读 2,893 离婚260天后，马伊琍近照曝光：每一个明天，都是最好的后半生 阅读 14,478 九生九世【天长帝九】（二十） 阅读 1,539

作者：撩课学院 链接：https://www.jianshu.com/p/9630d825a193 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。