什么是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

你可能感兴趣的:(什么是Webpack ?)