02 基础篇之webpack的用法

webpack核心概念之entry

核心概念之Entry

Entry ： 指定webpack打包入口

模块依赖图

依赖图入口是Entry，对于非代码，字体、图片的依赖也会不断加入到依赖图中，各种资源当成模块，各个模块都有依赖关系，形成依赖树，依赖图遍历完，形成依赖资源

Entry 的用法

多入口t-value

webpack核心概念之output

核心概念之Output

用来告诉webpack 如何将编译后的文件输出到磁盘

Output的用法

单入口配置：

多入口配置

例子：

webpack核心概念之Loaders

webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。本身是一个函数，接受源文件作为参数，返回转换的结果。

CSS、Vue、字体、less、scss等webpack本来不支持的，通过loaders来支持。

常见的Loaders有哪些？

Loaders的用法

rules是数组，用来存放loader

webpack核心概念之plugins

插件用于 bundle 文件的优化，资源管理理和环境变量量注入作用于整个构建过程，plugins是增强webpack loaders功能，loaders没法做的，plugin可以完成，作用域整个构建过程。比如：构建之前手动删除目录。

常见Plugins：

Plugins用法：

webpack核心概念之mode

Mode 用来指定当前的构建环境是：production、development 还是 none设置 mode 可以使用 webpack 内置的函数，默认值为 production, 用于区分生产、开发环境

解析ECMASCript 6 和 React JSX

资源解析： 解析ES6

.babelrc增加

ES6依靠babel-loader解析

安装babel-loader：

npm i @babel/core @babel/preset-env babel-loader -D

参考

极客时间 程柳峰老师 《玩转webpack》