1、什么是Webpack？
本质上，Webpack是一个静态模块打包工具。
2、为什么要使用Webpack？
在开发中，我们常常会遇到：
- 使用sass和less语法书写样式需要转译
- 使用es6及更高版本的语法来简化代码,浏览器无法识别
- 项目体积大,不利于上线
webpack就可以解决上述问题：
- 支持所有类型文件的打包
- 支持less/sass => css
- 支持ES6/7/8 => ES5
- 压缩代码, 提高加载速度
由此可见，webpack就是前端开发人员技术库中的必需品！
3、Webpack的使用
在使用前请安装node环境（详情见Node.js官网： nodejs.org/ ）
3.1、下载yarn包管理器
中文官网地址： yarn.bootcss.com/
下载地址： yarn.bootcss.com/docs/instal…
npm i -g yarn
3.2、Webpack的安装
- 创建项目文件夹
- 在项目文件夹内初始化包环境
yarn init -y
- 安装 webpack 依赖包
yarn add webpack webpack-cli -D
- 在 package.json 中, 配置 scripts 自定义打包命令
scripts: {
"build": "webpack"
}
3.3、Webpack的简单使用
- 新建 src/js.js ，写入并导出需要打包的代码，例如：
export const add = (a, b) => a + b
- 新建 src/index.js 导入使用
// webpack打包的入口
import { add } from './js'
console.log(add(2, 3));
- 运行自定义打包命令
yarn build
3.4、效果
生成 dist 目录（与src文件夹同级）和其中的 main.js 文件
(()=>{"use strict";console.log(5)})();
4、Webpack打包流程
- 执行局部webpack命令(前提项目中下载了webpack包)
- 有webpack.config.js用于读取, 否则用内置默认
- 根据入口建立引入关系
- 编译翻译整合打包输出到指定位置 注意：模块文件要和webpack入口产生直接或间接引入关系才能进行打包！
