历史搜索

一看就会的webpack5基础教程

游客2024-10-08 07:53:01
目录文章目录
  1. 一、基本配置
  2. 二、项目初始化
  3. 三、处理 HTML 资源
  4. 四、处理样式资源
  5. 4.5、兼容性处理
  6. 五、处理图片资源
  7. 六、处理字体图标资源
  8. 七、处理其他资源
  9. 八、处理 JS 资源
  10. 九、区分环境
  11. 结语

本文是关于 webpack5 基础教程,意在用尽可能简介明了的描述,一是帮助初学者学习,二是给老鸟复习,三是自己巩固知识!话不多说,直接开干!

版本说明: webpack:^5.75.0 webpack-cli:^5.0.1

一、基本配置

在开始使用 Webpack 之前,我们需要对 Webpack 的配置有一定的认识。

1.1、webpack 5 大核心

  • entry(入口)entry是 webpack 打包的入口,即指示 webpack 从哪里开始打包
  • ouput(出口)output是指示 webpack 将打包好的文件输出到哪里去,如何命名等
  • loader(加载器)webpack 本身只能处理 js、json,对于图片、字体等资源,webpack 需要借助 loader 进行解析
  • plugin(插件)plugin扩展 Webpack 的功能
  • mode(模式)mode指示 webpack 使用哪种模式,有两种
    • development(开发模式)
    • production(生产模式)

二、项目初始化

2.1、安装 webpack

(1)创建 learn_webpack5 文件夹,创建子文件夹 src,打开 vscode 终端,输入以下命令:

npm init -y

npm i webpack webpack-cli -D

会生成如下文件:

一看就会的webpack5基础教程 1

至此,webpack 的环境分离已经完成。

结语

以上就是全部关于 webpack5 基础配置的教程,希望能帮助初学者学习及参考,以及让老鸟巩固基础。