webpack5学习笔记—基础篇

目录

1. webpack

1.1 Webpack是什么？有什么用？

1.2 webpack的几个概念

2. webpack的基础使用

3.2.1 安装

3.2.2 webpack配置文件

3.2.3 打包命令

3. 资源模块

resource

inline

source

asset

 3. loader

1. 什么是loader

2. 处理css文件

2.1 加载css和less

2.2 抽离和压缩css

3. 图片资源

4. 字体资源

5. 数据资源

---

1. webpack

1.1 Webpack是什么？有什么用？

webpack是一个前端构建工具和模块打包工具(module bundler)，能根据模块的依赖关系进行静态分析，将各个模块按照特定的规则和顺序组织在一起，打包生成对应的静态资源(bundle)，缩小项目体积，提高加载速度

功能：

• less/sass -> css

• ES6/7/8 -> ES5

• html/css/js -> 压缩合并

webpack将所有的文件都都当做模块（module）处理

1.2 webpack的几个概念

Entry（入口）：指示 webpack具体从源码目录的哪个文件为入口起点开始打包。webpack从入口文件开始检索，将具有依赖关系的模块生成一颗依赖树，得到一个chunk。一个工程打包时可能生成一个或多个chunk。

在一个工程中可以定义多个入口，每一个入口都会产生一个结果资源 bundle

output：由chunk得到的打包产物一般称为bundle，output用于指示bundle输出位置与命名

Loader：能够去处理非 JS文件，如在打包过程中Loader将less、sass等文件生成webpack能识别的资源，一次处理一个

2. webpack的基础使用

3.2.1 安装

安装webpack前，需要先安装Node.js，可以通过以下命令来检查是否安装，若没安装Node.js，可以进入官网下载

node -v

新建一个项目目录，进入目录后初始化项目

npm init

按提示输入项目的名称、版本、描述、作者等信息，回车为默认，之后目录出现一个package.json文件，打开可以看到刚才输入的信息

 接下来安装webpack，webpack-cli

全局安装（不推荐）：

npm i webpack webpack-cli -g

本地安装：

npm i webpack webpack-cli --save-dev 

不推荐 全局安装 webpack 。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中， 可能会导致构建失败

 在项目目录下创建src文件夹（项目源代码目录）