常见的前端构建工具Webpack

 

1.Gulp/Grunt

一种能够优化前端工作流程的工具，比如自动刷新页面、combo、压缩CSS/JavaScript、编译Less/Sass等。

2.Webpack/Rollup

　　现在的代码构建工具(比如Vue CLI、Create React App等)底部实现都依赖Webpack。

一个JavaScript的模块打包器，用于整合编译成最终的代码。

Rollup：通常用来构件库

Webpack：用来构建应用程序

对于业务团队来说，更多情况下会选择webpack

3.认识webpack

入口(entry)、输出(output)、Loader、插件(plugins)

3.1.入口(entry)

指向前端应用的第一个启动文件，在vue中是new Vue()的启动文件。

webpack会从entry开始，通过解析模块之间的依赖关系，递归的构建一个依赖图，webpack会根据依赖图来对每个模块进行整合，最终打包成一个或者多个文件，来提供给浏览器进行加载

 3.2.输出(output)

输出字段用于告诉webpack要将打包后的代码生成的文件名是什么(filename)，以及将它们放在哪里(path)

3.3.Loder

要了解Loader，需要知道在webpack中每个文件，包括css、html、jpg等都会被作为模块处理

　　如果看过生成的bundle.js代码就会发现，Webpack将所有的模块打包一起，每个模块添加标记id，通过这样的一个id去获取所需模块的代码。

　　实际上webpack只理解javascript，因此loader的作用就是把不同的模块和文件(比如HTML、CSS、JSX、Typescript等)转换为JavaScript模块。

3.3.1.常见的Webpack Loader

 3.3.2.ES6模块

　　ES6模块需要Babal编译和Webpack进行打包，Babal在Webpack中使用Loader的方式来进行编译的。

Webpack在编译过程中支持多个Loader通过流水线的方式进行先后编译，编译的顺序为从后往前。最终以JavaScript模块的方式输出。

3.3.3.loader的运行位置

Webpack以entry为入口，链式调用每个loader进行编译，生成javascript，最终代码打包放置在output中。其中Loader负责将其它非javascript模块转换成javascript模块。webpack又是怎样地对这些代码进行组织并生成文件的呢？这个时候就用到插件(plugins)

 3.4.插件(plugins)

解决Loader无法做到的事情，它可以访问在Webpack编译过程中的关键事件，对Webpack内部示例的一些数据进行处理，处理完成后回调Webpack让其继续。

插件可以用来控制最终生成的代码是如何进行组织和输出的，包括对代码的打包优化、压缩，甚至是启用模块热替换、重新定义环境中的变量。

3.4.1.HtmlwebpackPlugin插件

 　3.4.2.CommonsChunkPlugin插件

 3.4.3.ProvidePlugin插件

 3.4.4.ExtractTextPlugin插件

 3.4.5.插件具体做了些什么事情

1. 1. 通过entry指定的入口开始，解析各个文件模块之间的依赖。
   2. 根据模块间的依赖关系，开始对各个模块进行编译。
   3. 编译过程中，根据配置的规则对一些模块使用Loader进行编译处理。
   4. 根据插件的配置，对Loader编译后的代码进行封装、优化、分块、压缩等。
   5. 最终Webpack整合各个模块，根据依赖关系将它们打包成最终的一个或者多个文件。

4.自动化工具

善用这些自动化工具来解决开发过程中的痛点，是作为现代前端开发的必备技能，使用Webpack的Loader和插件，实现自己的AST语法分析和代码处理过程。