这是我参与「第四届青训营」笔记创作活动的第4天

今天我们来学习Webpack知识体系！我们为什么要学习Webpack呢？原因有三点：1. 理解前端“工程化”的概念，工具，目标；2. 熟悉Webpack一定程度上可以成为个人的核心竞争力；3. 高阶前端的必经之路。

今天的学习目标：

理解Webpack的基本用法
通过介绍Webpack功能，Loader与Plugin组件设计，建立一个知识体系

那么什么是Webpack呢？一起来学习了解吧！

什么是Webpack

Webpack本质上是一种前端资源编译、打包工具

特性：

多份资源文件打包成一个Bundle
支持Babel、Eslint、TS、CoffeScript、Less、Sass
支持模块化处理css、图片等资源文件
支持HMR + 开发服务器
支持持续监听、持续构建
支持代码分离
支持Tree-shaking
支持Sourcemap

等等.............

Webpack的使用

使用步骤：

安装依赖
编辑配置文件
执行编译命令

配置文件

entry ：负责打包的入口文件
output：负责打包的出口文件，filename定义打包成的文件名称，path定义打包完的包所放置的路径

module.exports = {
    entry: './src/index',
    mode: "development",
    devtool: false,
    output: {[
        filename: '[name].js',
        path: path.join(__dirname,'./dist')
    ]}
}

webpack负责打包项目，那么它的工作流程是怎么样的呢！一起来了解一下吧！

Webpack工作核心流程

入口处理：从'entry'文件开始，启动编译流程
依赖解析：从'entry'文件开始，根据'require' or 'import'等语句找到依赖资源
资源解析：根据'module'配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
资源合并打包：将转移后的资源内容合并打包为可直接在浏览器运行的JS文件

Webpack的模块化 + 一致性

上面简略介绍了Webpack的内容，下面我们来学习怎么具体使用Webpack来帮助我们打包文件吧！

使用Webpack

关于Webpack的使用方法，基本围绕着"配置"展开，这些配置可大致分成两类：

流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
工具类：主流程之外，提供更多工程化能力的配置项

Webpack--处理CSS

让我们先来看看下图介绍Webpack处理css的步骤，

rules数组对象展示处理css的规则，test中表示处理什么后缀文件名

Webpack--接入Babel

Babel把高版本的JS代码转换成低版本的JS代码，为了能使代码兼容，让处理器能成功编译

Webpack--生成HTML

生成HTML文件和前面的处理方法有一些不同，这里是用插件HTMLWebpackPlugin() 来进行处理。

使用Webpack--HMR

HMR--Hot Module Replacement 模块热替换，开发时可以进行实时更新查看效果

使用Webpack--Tree-Shaking

Tree-Shaking 树摇，用于删除Dead Code，本质上是删除一些不需要的代码

Dead Code：

代码没有被用到，不可到达
代码的执行结果不会被用到
代码只读不写

配置方法：

配置文件中：

mode设置production，

optimizationusedExports：true

Webpack与Loader

Webpack只认识JS代码，为了处理非标准JS资源，设计出资源翻译模块 --- loader，用于将资源翻译为标准JS

使用Loader

Loader进行链式调用：

常用的loader：

关于Webpack的知识还有很多，老师用了两个小时带我们入门，理解了Webpack知识体系的大概框架，让我受益匪浅！

Webpack知识体系|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第4天