前端构建工具的使用

1.为什么要使用构建工具？

主要原因

a JavaScript和css的依赖问题

在开发中，经常出现的一个问题，就是JavaScript和css的依赖问题；简单来说就是JavaScript和css在页面

中的顺序问题。

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

很多情况是引入的JavaScript和css的顺序不对，所以我们使用构建工具可以大大减少此类问题的出现。

b 性能优化

一般情况下浏览器请求的文件越多越耗时，文件越大越耗时。通常有两种方式来解决问题：

         文件合并

           浏览器下载多个文件时，有并发限制，只能同时下载几个文件，所以我们需要将文件

合并，减少请求次数，从而提高浏览器效率。

        文件压缩

        我们都知道文件越大，下载越慢。针对js和css里面的空格，换行这些都是为了我们读起来方便，但是对于

机器来说，这些对他不存在影响。so，为了减少文件大小，一般我们都会用工具去掉空格和换行，

甚至可以使用比较短的变量名来减小文件大小。

c提高开发效率

对于csss3来说，在不同的浏览器下，我们需要些不同的前缀Vendor来区分，手动添加的话很繁琐哦，

而很多构建工具可以自动给我们加上css的前缀，从而加速我们的开发效率。

 

接下来我们学习webpack。。。

webpack是一个打包器（bundler）

在webpack的概念里面，前端的所有资源文件（js，css，json，ing，sass，less。。。）都会作为模块俩被处理，

webpack会根据模块的依赖关系进行静态分析，生成对应的静态资源，最终打包部署上线。

首先了解下webpack的一些铺垫知识：

loader

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

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

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

loader一般以xxx-loader的方式命名，xxx代表了这个loader要做的转化工作，例如css-loader。。。

插件

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

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

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

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

• UglifyJSPlugin:  压缩js文件

• HtmlWebpackPlugin:  自动生成HTML文件

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

•  

• 2.1  初始化项目

   

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

   

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

  

 

• 

  

   

   

  

   

  2.2  打包项目中的js和json文件

   

  （一）新建单个js文件，如下图所示：

   

  

   

  打开命令行执行打包代码：

  

  

   

  打包成功后，你就可以引入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)。

   

  (一)  下载安装

  

  (二） 修改配置文件

   

  在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文件，并做好相关配置引入，如下图所示：

   

•  

•  

•  

•  

•  

•  

•  

•  

•  

•