没有合适的资源?快使用搜索试试~ 我知道了~
webpack4.0教案内容1
需积分: 0 0 下载量 73 浏览量
2022-08-08
18:55:40
上传
评论
收藏 333KB DOCX 举报
温馨提示
试读
23页
首先,第一章:就是我们现在的课程介绍,第二章,初识webpack,我们来讲解webpack是什么?它的产生背景以及它的基础使用。第三章,webpack核心概念。
资源详情
资源评论
资源推荐
1-1 课程导学
同学们,大家好!又和大家见面了。这次给大家带来的是一套,webpack4 的课程。随着前端
工程越来越复杂。单独建几个文件,来写业务代码。这样的方式已经无法保证,项目的可维
护性了,所以我们就想,把不同的业务逻辑拆成模块,然后去,分开引入这些模块。每个模
块自己做自己的事情。这样就可以保证项目的维护性,和,可扩展性了。但假如,你有几千
个模块,你能在页面上引入几千个 JS 文件吗?所以当项目大到这个程度的时候,我们就嘚
借助工具,来管理我们的这些模块了。
webpack 就是这样的一种工具,帮助我们管理复杂项目的一个工具。你可以先,暂时这么理
解。与 webpack 类似还有很多相似的工具。比如说 gulp,grunt,browserify,但是这两年 webpack
的使用率直线上升。比如说 VUE,React,Angular 三大框架的脚手架工具,都开始使用 webpack
来做底层代码的构建。这得益于 webpack 可以提供,其他工具无法实现的一些特性。比如
说 Tree shaking,代码懒加载,codes spling 也就是代码分割。当然这些内容呢,我们在后面
都会细讲。所以现在来看,用 webpack,做代码管理的工具,已经是越来越多前端开发者的
共识了,如果你不会 webpack,你可能觉得,我写业务代码也没有任何的问题啊,但是如果
你学会了 webpack,你会从更深一层,去思考前端工程化上面的内容。也能发现在代码的背
后其实别有一番天地。
学习 webpack,将极 大的 扩充 你的 前端 开发 视野 ,所 以我 非常 推荐 大家 来学 习一 下
webpack,webpack4 相对于之前的版本,有了比较多的变化。它的速度更快了,在大型项目
的构建过程种,webpack4 甚至可以节约百分之九十以上的构建时间,同时 webpack4 内置了
更多的默认配置,也变更了很多之前的 API,这门课程我希望通过详细的讲解,带大家全面
掌握 webpack4,同时,这门课也不局限于 webpack4 这个版本,在课程里,我会详细给大家
讲解 webpack 官方文档的查阅方式。这样即便,未来版本升级,也可以迅速的跟上节奏。
下面我来给大家介绍一下整个课程的章节安排。首先,第一章:就是我们现在的课程介绍,
第二章,初识 webpack,我们来讲解 webpack 是什么?它的产生背景以及它的基础使用。第
三章,webpack 核心概念。这里面我会给大家讲解清楚 loader, plugin,sourceMap,HMR
这样的一些基础概念。
第四章,webpack 进阶。这一章,我们将讲解,诸如:TreeShaking,代码分割,懒加载,缓
存,shimming 这样的一些稍微复杂的概念。
第五章,webpack 实战配置案例,这一章,我们结合之前的基础知识,给大家讲解如何打包
一个库。如何打包 P W A 项目,如何在项目中配置 typeScript,ESlint。如何打包多页应用?
这样的一些实战常用配置项。
第六章, webpack 底层原理及脚手架工具分析。
这章我将教大家,如何编写自己的 loader 和 plugin。同时,我们还会通过自己不到一百行的
代码,实现一个类似 webpack 的打包器。当然,应大家的建议。在最后,我还给大家分析
了一波 create-react-app 和 vue-cli 3.0,这样的脚手架工具中的 webpack 配置。
如果把课程的知识点打散,大家可以看到,这就是整个课程中,我们涉及到的所有知识点。
内容虽然多,光背单词,好像对很多同学来说都有难度,但我相信大家,只要认真的跟下来。
一定可以掌握这些知识点。
好,下面我们一起来看一下,学习这门课程我们之前,要有什么样的知识储备,我个人认为
啊,webpack 的课程应该是一门高级的前端课程,虽然我努力的提升讲解质量。降低大家的
学习难度。但,要想学习这门课程,HTML,js,css 这样的基础前端知识,大家还是必须要
掌握的。
在此基础上了,你还需要对 node.js 有一点了解。至少你要使用过 node 中的一些核心模块。
同时学习这门课程,还需要大家或多或少,对 webpack 有一点了解。如果在开发中,你从
来没有用过这样的打包工具,或者压根就没听说过 webpack,那么学习起来你可能,也会有
一点吃力。好!假如你的前端基础没问题,或多或少的了解一点儿 node.js。和 webpack 的
内容,那么就可以过来和我一起学习这门课程了,
这套课程的讲授方式,我会本着下面这个思路,首先通过通俗易懂的例子,来给大家讲解基
础知识,然后通过实战例子,带大家巩固基础知识,所有的代码呢,我都是全部逐行手写完
成的,这样避免大家的思维跳跃,最后课程的难度循序渐进,由浅入深,我们先学使用,再
讲原理,通过这门课程的学习,大家可以彻底学会 webpack 配置项的使用,同时也可以理
解 webpack 的作用。以及它的底层原理。当然在公司里面,上手项目的打包过程配置,也
是不会有问题的。同时你会拥有工程化的前端思维,步入前端高级工程师的行列,如果大家
对学习前端很感兴趣,想进一步学习前端技能,拿到高薪,可以关注我,我会经常分享前端
的一些内容,大家如果有兴趣,可以持续学习,进一步提升技能。好!那么接下来我就正式
带大家开始这门课程的学习,大家加油!
2-1 很久以前是如何编写前端代码的
这节课开始,我来给大家讲解 webpack 这门课程。对于从事前端开发工作的同学们来说,
webpack 大家肯定都听说过。我想,很多同学呢,对 webpack 也有一点点的了解。但是 webpack
究竟是什么?它产生的背景,以及它能解决的问题是什么呢?我想有一部分同学。就不是很
清楚了,所以第一节课,我就带大家,来搞清楚,这个最基础的问题。Webpack 究竟是什么?
在很久很久以前,当我们写一个 web 网页的时候,一般是这样来做的。
首先创建一个 session 文件夹,在这个文件里,我们创建一个 index.html 文件,和 index.js 文
件。大家可以跟着我一起来操作。…….在这里,我给它初始化一个 HTML 内容。然后呢,一
般来说,我们的一个网页文件,会有对应的 HTML 标题。我们可以写一个“这是最原始的网
页开发”。
body 里面会有网页内同,比如说,
<p>这是我们的网页内容</p>
再加一个 div 标签。<div id = “root”></div>
OK,我们的一个网页不仅仅只有内容。还应该包含一些样式和 js 内容。样式呢我们可以在 head
里面写一些。 这里样式我就暂时先省略。那些业务逻辑呢,我们可以写在 js 里面。
在这里我们增加一个 js 标签 script。
<script src=”./index.js”></script>
好,src 呢,让他引入一个当前目录下的 index.js 这样的一个文件。保存一下,然后我们运行
一下这个网页。这是我们的网页内容。就输出出来了
好,接下来我们在 js 文件里面写一些业务逻辑。我就写一些非常简单的逻辑。首先我们,
定义一个变量, var dom = document.getElementById(‘root’); 接下来,我们向这个 DOM 节
点上添加一些内容。
首 先 我 们 创 建 一 个 元 素 var header = document.createElement(‘div’); 然 后
header.innerText = ‘header’. 之后呢我们把这个 header append 这个 dom 元素里。好, 我
们回到网页,看一下效果。我们看到这个 header 的 div,就被挂载到页面上。好,一个网页
通常会有头部 header 区域, setBar 区域,以及 content 内容区域,于是我们可以继续写。
var sidebar = document.createElement(‘div’);
sidebar.innerText = ‘sideBar’;
dom.append(sideBar)
同理:
var content = document.createElement(‘div’);
content.innerText = ‘content’;
dom.append(sideBar)
好!保存,我们看下效果。这样的话,我们页面的 header, sidebar, content 三个区域,就由 js
渲染出来。很久很久之前呢,大家知道,js 能实现的逻辑相对而言是比较弱的。所以呢,可
能,我们只是简简单单的写一些非常基本的 js 代码。随着前端技术的发展。Js 能实现的代
码内容,越来越多。所以呢,大家可以想一下,我们现在就不仅仅需要创建这个 header, sidebar,
content 了。我们可能在里面,增加非常非常多的逻辑。于是我们就发现,如果,通过面向
过程的方式,去写我们的代码,我们的代码就会变得非常的长,很多同学呢,可能对面向对
象,本身就不太熟。其实,你现在写的代码,打开来看,如果是按照面向过程这种方式来写
的话,所有的 Js 逻辑,都堆在一个文件里。这个文件会堆得越来越大,越来越大,最终变
得,不可维护。
这个时候,就出现了一种新的编程方式,面向对象编程。那么,如果我们用面向对象的写法,
来写这段代码,该怎么来写呢?
2-2 webpack 究竟是什么?
好,同学们!上一节,我们讲了面向过程,是如何开发的,接着上一节课,我们继续讲。我
们说页面有三个部分,分别是 header,sidebar,content。那我呢,就可以把这三个部分,
按照三个对象来写。所以我呢,就创建三个文件,(……创建文件)大家来看,分别是
header.js,sidebar.js,和 content.js。
然后,我们来写 header.js 里面的代码,那,面向对象的方式,我们该怎么来写 header.js 的
代码呢?我们先打开 index.js,大家来看,index.js 里面,写了这样一段代码。在 header 里,
代码就要这样写。我们首先定义一个构造函数,function Header() {} 其实呢,它就是一个类,
在构造函数里面呢,我们再去做,这个创建 DOM 的逻辑,我们把这块,都放在构造函数里。
(…停顿)
function Header() {
var dom = document.getElementById(‘root’);
var header = document.createElement(‘div’);
header.innerText = ‘header’;
dom.append(header);
}
OK!
这样的话 header.js,只负责 header 的逻辑,
同样的,我们再去写 sidebar 的逻辑,记住啊!首字母要大写,因为在创建一个构造函数,
或者定义一个类的时候。类的首字母,一般都是大写的。
(写)
function SideBar() {
var dom = document.getElementById('root');
var sideBar = document.createElement('div');
sideBar.innerText = 'sideBar';
dom.append(sideBar);
}
这样 sideBar.js 只负责 sideBar 里面的逻辑。
好!继续写,content.js。我想大家,也知道该怎么写了,这里,再写一下 content.js。
function Content() {
var dom = document.getElementById('root');
var content = document.createElement('div');
剩余22页未读,继续阅读
张匡龙
- 粉丝: 17
- 资源: 279
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0