Webpack发展历程

一、市面上有哪些类似于Webpack的前端工程化工具

1.grunt
2.gulp ( 4.x )
3.Browserify ( Webpack 前身 )
4.Webpack 【 主流行 】
5.rollup.js https://www.rollupjs.com/guide/zh
6.parcel
7.FIS https://fis.baidu.com/

二、前端工程化工具的发展历程

1.grunt
2.gulp ( 4.x ) 流的操作 .pipe()
3.Browserify ( Webpack 前身 ) 没有兼容模块化问题（ es6 ）4.Webpack 【 主流行 】 自动解决模块依赖性问题

三、 Webpack版本的发展过程

官网: https://webpack.js.org/
中文: https://www.webpackjs.com/

webpack1
支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。

webpack2
支持ES Module，分析ESModule之间的依赖关系，
webpack1必须将ES，Module转换成CommonJS模块，2支持tree sharking

webpack3
新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment；
webpack3以上基本上都可以解决es6提出的模块化

webpack4
可以解决es6模块化
更多个功能性 pulgin 和 loader
前端框架中广泛使用： Angular Vue React 的脚手架都是由webpack来进行开发、管理

四、 Webpack涉及到的前端环境问题

1. Webpack底层是由 Node.js 来开发的，也就是说Webpack的配置文件都是 Node.js 文件

2. Webpack的模块化书写的规范是Common.js规范

3. 环境支持： Node.js 8+

4. 前端环境：

   • 开发环境 - 无法直接在服务器中去运行
   • 生产环境 - 将开发环境下的代码经过 打包 压缩 编译 之后的文件
   • 测试环境 - 将开发环境的代码经过 打包 压缩 编译 之后的文件，放在测试环境服务器中运行
     • unit test 单元测试
     • e2e 端到端测试
   • 预上线环境： 将开发环境的代码经过 打包 压缩 编译 之后的文件，放到一个局域网中去运行
   • 上线环境：将开发环境的代码经过 打包 压缩 编译 之后的文件，放到云服务器或是服务器主机中，可以供任何人访问，使用的一个环境（ 这个环境的上线要经过国家审核 ）

5. 核心关注点在：

   • 开发环境
   • 生产环境