404 Webpack概述

Posted 2021-03-04 Keep going

Webpack

• webpack官网
• webpack中文网

一、Webpack 介绍

Webpack 是什么? (mianshi)

• 前端模块化打包(构建)工具 【构建：打包】
• WebPack可以看做是模块打包机：它做的事情，是分析你的项目结构，找到javascript模块、其它的一些浏览器不能直接运行的拓展语言（Scss，less等）以及 新语法，并将其 转换和打包 为合适的格式供浏览器使用。

---

为什要使用WebPack? (mianshi)

• 浏览器不识别 SASS、Less ==> 需要对Less/SASS 预编译CSS => 供浏览器使用
• 项目中的模块化以及互相之间引用依赖包造成文件分散 ==> 需要把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数
• 打包成了大文件，体积就变大了 ==> 代码压缩
• 部分ES6语法有兼容问题 => ES5 => 浏览器使用
• .........
• 以上这些操作以前都是需要我们手动处理，这是非常繁琐的， 这个时候webpack就可以上场了，以上的这些操作，在webpack里，只要配置好，一下就可以都搞定了

---

Webpack的基本能力：处理依赖、模块化、打包

• 处理依赖：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块
• 合并代码：把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数，优化代码的体积(压缩代码)
• 各种插件：比如 babel 把 ES6+ 转化为 ES5- 等

---

webpack的工作原理 (mianshi)

• 简单的说就是分析代码，找到“require”、“import”、“define”等关键词，并替换成对应模块的引用。
• 在一个配置文件中，指明对某些文件进行编译、压缩、组合等任务。把你的项目当成一个整体，通过一个给定的主文件?（index.js），webpack将从这个文件开始找到你的项目的所有的依赖文件，使用loaders处理他们，最后打包为一个浏览器可 以识别的js文件。

---

二、Webpack 四个核心概念

入口(entry)、出口(output)、加载器(loader)、插件(plugins)

• 入口 ： 要打包哪个文件
• 出口 ： 要打包到哪里
• 加载器 ： 加载除了js文件其他文件的功能 【Webpack 默认只加载js文件。】
• 插件 ： 处理加载器完成不了的功能， 使用插件

---

三、学习 手动配置 webpack 的初步目的

• 为了我们后面使用脚手架做准备
• 能够完成webpack的基本安装
• 能够了解webpack配置文件的作用
• 能够说出webpack中loader 的作用
• 能够使用webpack处理常见的资源(css/less/图片)
• 能够说出webpack-dev-server的作用以及配置
• 目标 ： 能跟着 视频 + 笔记 照着敲完一遍即可