什么是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. 核心关注点在：
   • 开发环境
   • 生产环境

五、Webpack的安装

安装可以使用任何一个包管理器： npm yarn cnpm

yarn > cnpm > npm

举例： 我使用npm安装了一个叫做 node-sass 的包 ，但是出错了 ，这时，我们想卸载，发现卸载报错

解决： 覆盖安装

cnpm || yarn 进行覆盖安装

cnpm 和 yarn 优先级没有那么绝对

1.全局安装( 选择以下一种即可 )

$ npm install webpack webpack-cli -g

$ cnpm install webpack webpack-cli -g

$ yarn add webpack webpack-cli global

2.局部安装

$ npm install webpack webpack-cli -D

$ cnpm install webpack webpack-cli -D

$ yarn add webpack webpack-cli -D

局部优先级 > 全局

六、Webpack的概念

• webpack* 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle（ 分块束 ）

七、Webpack 使用

默认源代码开发目录为： src

默认的入口文件名称为： src/index.js

默认出口目录为： dist

默认出口打包文件名称为： main.js

通过mode来设置是那个环境下打包使用

开发环境打包： 代码不经过压缩、注释不会被删除

1.终端命令行使用

• 终端运行 webpack
  • 默认生成环境打包
• webpack --mode development/production 开发环境/生产环境打包

2.配置文件使用

• 默认webpack配置性文件名称为 webpack.config.js，这个文件是在根目录下运行的
• 运行 webpack 命令就会自动的去寻找这个 文件
• webpack.config.js文件中我们配置的就是 webpack的参数

3.配置webpack.config.js文件

我们接下来对这个文件进行配置，主要从以下几个方面来着手

1. 基础功能 ：  入口   出口 文件配置
2. 转换器： loader 
3. 插件: plugin