Webpack5实战教程

1. 什么是webpack?
- 简介
2. 学习webpack使用的环境参数
- node.js安装
- webpack安装
3. 学习webpack的必备技能
4. 为什么使用webpack
5. 如何使用webpack
6. webpack五个核心概念
7. webpack初始化配置
8.编译打包应用
9.注意!!!
10.每日总结

1. 什么是webpack?

简介

首先,他是一个工具,就像扳手螺丝刀,等一系列工具.
工具的作用就是让我们更方便,更快捷方便的完成我们想做的事
webpack的作用是文件打包,好!那么问题又来了,什么是打包?
“打包”，如何理解？假设我们需要寄快递。我们将许多的物品都放进了一个纸皮箱，然后进行封箱。这就是打包。对应到前端开发来说，就是将很多的的 css文件，js文件，图片等“物品”，全都写进一个js文件，而不是在一个html页面通过script,link标签去引入多个静态资源。
而且我们的这个打包之后,还有更加强大的作用,我们打包的文件,如果版本不合适,我们的工具还可以帮助我们进行调整.
总而言之,webpack方便而又强大!!!
webpack模块化，其实不同的css，不同的js就是一个模块。

比如说，一个index.html,通常会有一个index.css,
一个index.js，还有其他的css，js。
这些不同的文件都可以看做不同的模块。
不同的模块有各自的作用。

总结来说：用这个工具，帮助我们将不同的资源和文件，进行打包，也就是合并在一个文件里面。
但是不仅仅如此，它还附加了一些功能。
例如:
1.CSS 预处理。将 Less, Sass 编译成css
2.ES6 语法转成 ES5
webpack 是一种前端资源构建工具，一个静态模块打包器

2. 学习webpack使用的环境参数

node.js安装

Nodejs 10版本以上
Node.js安装教程
如果过程中出错可以看评论

webpack安装

Webpack 4.26版本以上

打开cmd命令行
输入命令 npm install webpack webpack-cli -g

3. 学习webpack的必备技能

基本Nodejs知识和Npm指令
操作终端我们需要用到Npm指令
熟悉Es6语法

4. 为什么使用webpack

文件依赖关系错综复杂
静态资源请求效率低
模块化支持不友好
浏览器对高级JavaScript特性兼容度较低

<link rel='stylesheet' href='./index.less'>无法识别

我们就要使用我们的打包工具,进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。
例如:
将less编译成css，ES6 语法 转成 ES5等等。

5. 如何使用webpack

在VScode中打开终端,
使用npm init初始化
初始化后进行一次命名
后面全部按回车使用默认选项
然后使用npm i webpack webpack-cli -g全局安装
然后使用npm i webpack webpack-cli -D全局安装

6. webpack五个核心概念

入口(entry)

入口起点(entry point) 指示 webpack 应该
使用哪个模块来作为构建其内部 依赖图(dependency graph) 的开始.
webpack会从起点文件开始，从起点寻找直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据.

默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性来指定一个（或多个）不同的入口起点。例如：

webpack.config.js

module.exports = {entry: './path/to/my/entry/file.js',
};

输出(output)

输出(Output)指示 webpack 打包后的资源
bundles 输出到哪里去，以及如何命名。
出口一般包含两个属性：path和filename。
用来告诉webpack打包的目标文件夹，以及文件的名称。
目的地也可以有多个。

加载器(loader)

Loader 让 webpack能够去处理那些非 JavaScript 文 件
webpack本身只识别Js文件，如果要加载非JS文件，
必须指定一些额外的加载器（loader），例如css-loader。
然后将这些文件转为webpack能处理的有效模块，
最后利用webpack的打包能力去处理。

插件(plugins)

插件可以扩展webpack的功能，
让webpack不仅仅是完成打包，
甚至各种更复杂的功能，
或者是对打包功能进行优化、压缩，提高效率

模式Mode
模式(Mode)指示webpack使用相应模式的配置.

选项	特点
development	能让代码本地调试运行的环境
production	能让代码优化上线运行的环境

7. webpack初始化配置

创建一个空目录

初始化 package.json

输入指令: npm init

环境初始化

下载并安装 webpack
自动生成依赖

输入指令: 全局安装   npm install webpack webpack-cli -g 本地安装 npm install webpack webpack-cli -D

8.编译打包应用

创建文件

在我们的webpack文件夹内创建一个src目录,
在里面创建一个index.js的文件
打开新终端输入
运行指令

开发环境指令：

webpack src/index.js -o build --mode=development

功能：webpack 能够编译打包 js 和 json 文件，
并且能将 es6 的模块化语法转换成浏览器能识别的语法。

生产环境指令：webpack src/js/index.js -o build --mode=production

功能：在开发配置功能上多一个功能，压缩代码。

总结

webpack 能够编译打包 js 和 json 文件。
能将 es6 的模块化语法转换成浏览器能识别的语法。
能压缩代码。

留下的问题

不能编译打包 css、img 等文件。
不能将 js 的 es6 基本语法转化为 es5 以下语法。

9.注意!!!

在输入开发环境指令时,如果报错,首要查看打包文件路径!!!

10.每日总结

今天对webpack有了一个基本的了解
我们知道webpack是一个功能强大的打包工具
它能合并打包我们的各种文件
并且我们学会了如何使用它,
了解到了它的五个核心概念以及对它们的认识.
还学会了webpack初始化配置

今日的webpack学习到这里啦!
加油!明天更努力!

Webpack是什么?(webpack初学简单易理解)相关推荐

简单易理解的做法：有n个人围成一圈，顺序从1开始排号。从第1个人开始报数（从1到3报数），凡报到3的人退出圈子，问最后留下的是原来第几号的那位。简单的循环做法。
写在前面:这个方法用到很简单的指针与循环,以方便新手上手该题,并且通过直接模拟的方式理解这一过程.很多同学看懂题目意思而无法实现,不妨看看我的方法. 上代码: #include<iostream ...
Ajax简单易理解笔记
Ajax笔记一.get和post请求 1.post-file 二.什么是Ajax 三.封装Ajax 四.用户注册ajax接口测试五.ajax-post 六.ajax-jquery 练习:一键换内容 ...
Java常用类之String类知识清单，简单易理解
String类基础知识 1.String类表示字符串,理解为不可变的字符序列 2.String类声明为final,不可被继承 3.String类实现了Serializable接口:表示字符串是支持序列 ...
简单易理解的RC滤波器（含电路仿真）
滤波器滤波器是对波进行过滤的器件,是一种让某一频带内信号通过,同时又阻止这一频带外信号通过的电路. 滤波器主要有低通滤波器.高通滤波器和带通滤波器三种,按照电路工作原理又可分为无源和有源滤波器两大类 ...
disable简单易理解用法(小白福音)
今天遇到了disabled的一个练习,按照记忆试了一下,运行不出来,搜了半天才搜到可以解决我问题的信息,基于在很多人转载别人的博客,也没有解释,让初学者摸不到头脑,我就来把复杂的内容简单化,废话不多说 ...
多态的概念简单明了，易掌握，易理解！
通俗易懂讲多态,举例说明易理解!!! 首先要满足多态就必须要有三个条件继承关系必须重写父类引用必须指向子类对象其次就是它的概念,其实不用去思考太多,只需要记住一点就好:就是一个类的实例的相同方 ...
webpack 4x的安装和简单使用
第一步 npm init 这条命令输完后会在当前目录下生成一个package.json文件第二步安装webpack npm install webpack -g//全局安装 npm install ...
vue ---- 工程化概念、webpack概念、webpack的安装配置，以及简单使用
引入jQuery,并使用他操作dom元素 index.js //1. 使用 ES6 中的高级语法, 导入一个jQuery import $ from 'jquery'//2. 定义 jQuery的入口 ...
修改html时webpack热更新,webpack学习之路（二）webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...

Webpack是什么?(webpack初学简单易理解)