一、市面上有哪些类似于Webpack的前端工程化工具
- grunt
- gulp ( 4.x )
- Browserify ( Webpack 前身 )
- Webpack 【 主流行 】
- rollup.js https://www.rollupjs.com/guide/zh
- parcel
- FIS https://fis.baidu.com/
二、前端工程化工具的发展历程
- grunt
- gulp ( 4.x ) 流的操作 .pipe()
- Browserify ( Webpack 前身 ) 没有兼容模块化问题( es6 )
- 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涉及到的前端环境问题
- Webpack底层是由 Node.js 来开发的,也就是说Webpack的配置文件都是 Node.js 文件
- Webpack的模块化书写的规范是Common.js规范
- 环境支持: Node.js 8+
- 前端环境:
- 开发环境 - 无法直接在服务器中去运行
- 生产环境 - 将开发环境下的代码经过 打包 压缩 编译 之后的文件
- 测试环境 - 将开发环境的代码经过 打包 压缩 编译 之后的文件,放在测试环境服务器中运行
- unit test 单元测试
- e2e 端到端测试
- 预上线环境: 将开发环境的代码经过 打包 压缩 编译 之后的文件,放到一个局域网中去运行
- 上线环境:将开发环境的代码经过 打包 压缩 编译 之后的文件,放到云服务器或是服务器主机中,可以供任何人访问,使用的一个环境( 这个环境的上线要经过国家审核 )
- 核心关注点在:
- 开发环境
- 生产环境
五、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