第一部分、webpack基本使用

目录

打包工具的用途

介绍

基本使用

5大核心概念

基本配置

开发模式

处理样式资源

处理CSS资源

处理less资源

处理Sass和Scss资源

处理stylus资源

处理图片资源

处理字体图标资源（及音视频等其他资源）

处理js资源

处理HTML资源

搭建开发服务器

生产模式

准备

css处理

css兼容性处理

重复代码单独封装

css压缩

---

打包工具的用途

开发时会使用框架、ES6模块化语法、Less/Sass等CSS预处理器等语法，要想在浏览器运行这些就必须经过编译，此时打包工具就派上了用场。此外，它还可以压缩代码、做兼容性处理、提升代码的性能等。常见的打包工具有Grunt、Gulp、Parcel、Webpack、Rollup、Vite……

介绍

Webpack是一个静态资源打包工具，它会以一个或多个文件作为打包的入口，将整个项目所有文件编译组合成一个或多个文件输出出去，输出的文件就是编译好的文件，就可以在浏览器运行了。我们将Webpack输出的文件叫做bundle。

Webpack本身功能有限：开发模式仅能编译JS中的ES module语法，生产模式还能压缩JS代码。所以主要学习如何处理其他资源。

基本使用

资源目录

在index.html引入main.js后运行