本文是关于 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
会生成如下文件:
至此,webpack 的环境分离已经完成。
结语
以上就是全部关于 webpack5 基础配置的教程,希望能帮助初学者学习及参考,以及让老鸟巩固基础。