谷粒学院16万字笔记+1600张配图(四)——前端技术

项目源码与所需资料
链接：https://pan.baidu.com/s/1azwRyyFwXz5elhQL0BhkCA?pwd=8z59
提取码：8z59

demo04-前端技术

1.VsCode的安装和使用

1.1下载安装VsCode

1.为了避免以后出bug,我下载的VsCode版本和老师的一样,都是1.29.1版本,在Chrome的url输入下载地址:https://update.code.visualstudio.com/1.29.1/win32-x64/stable并按回车即可下载

2.如果使用官网下载很慢,可以复制下载链接用迅雷进行下载,嘎嘎快!

3.下载完成后直接进行傻瓜式安装即可

1.2给VsCode安装插件

1.点击方框圈的地方

2.在搜索栏搜索并安装如下四个插件(安装完这四个插件后重启VsCode以便使我们安装的插件生效):

Chinese (Simplified) Language Pack for Visual Studio Code —— 中文语言包

Live Server —— 以内嵌服务器方式打开。以前我们想要访问静态页面1.html需要将1.html放到tomcat服务器上,然后使用ip和端口号来访问1.html,有了这个插件就可以直接以内嵌服务器方式打开1.html

Vetur —— 语法高亮、智能感知、Emmet 等 包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个 Ctrl 需要同时按着）

vue-helper—— 在代码前加el即可加载完整的elementUI代码片段

1.3创建工作区

1.在本地创建一个空文件夹

2.使用vscode打开上一步创建的空文件夹

3.将文件夹保存为工作区

①点击文件–>将工作区另存为…

②选中在第1步创建的空文件夹vs1010,给工作区起一个名字(随意起名)

1.4创建文件夹&文件

①右键点击vs1010选择"新建文件夹",这里我们创建一个名为demo1的文件夹

②右键点击demo1选择"新建文件",这里我们创建一个名为demo1的文件

③在01.html中编写代码

④在空白处右键选择"Open with Live Server",然后就会使用默认浏览器显示01.html(这是我们在"1.2给VsCode安装插件"中安装的Live Server插件的功劳)

⑤顺便看一下如果直接从本地打开01.html是什么样的:

2.es6语法

2.1let定义变量

// var 声明的变量没有局部作用域
// let 声明的变量  有局部作用域
{
var a = 0
let b = 1
}
console.log(a)  // 0
console.log(b)  // ReferenceError: b is not defined

// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m)  // 2
console.log(n)  // Identifier 'n' has already been declared

2.2const声明常量(只读变量)

// 1、声明之后不允许改变    
const PI = "3.1415926"
PI = 3  // TypeError: Assignment to constant variable.

// 2、一但声明必须初始化，否则会报错
const MY_AGE  // SyntaxError: Missing initializer in const declaration

2.3解构赋值

解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

//1、数组解构
// 传统
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)

//2、对象解构
let user = {name: 'Helen', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let {name, age} =  user//注意：结构的变量必须是user中的属性
console.log(name, age)

2.4模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

// 1、多行字符串
let string1 =  `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?

// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.

// 3、字符串中调用函数
function f(){
    return "have fun!"
}
let string2 = `Game start,${f()}`
console.log(string2);  // Game start,have fun!

2.5声明对象简写

const age = 12
const name = "Amy"
// 传统
const person1 = {age: age, name: name}
console.log(person1)
// ES6
const person2 = {age, name}
console.log(person2) //{age: 12, name: "Amy"}

2.6定义方法简写

// 传统
const person1 = {
    sayHi:function(){
        console.log("Hi")
    }
}
person1.sayHi();//"Hi"
// ES6
const person2 = {
    sayHi(){
        console.log("Hi")
    }
}
person2.sayHi()  //"Hi"

2.7对象拓展运算符

拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

// 1、拷贝对象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone)  //{name: "Amy", age: 15}

// 2、合并对象
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2)  //{age: 15, name: "Amy"}

2.8箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：

参数 => 函数体

箭头函数多用于匿名函数的定义

// 传统
var f1 = function(a){
    return a
}
console.log(f1(1))
// ES6
var f2 = a => a
console.log(f2(1))

// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
    let result = a+b
    return result
}
console.log(f3(6,2))  // 8
// 前面代码相当于：
var f4 = (a,b) => a+b

3.vue

3.1vue入门案例

1.在工作区下vs1010下创建文件夹vuedemo,并在该文件夹下创建文件01-vue入门.html。然后使用vscode的快捷键!生成html代码

2.在html中引入js文件

①js文件在资料中

②将js文件粘贴到第1步创建的vuedemo文件夹中

③在01-vue入门.html文件中引入js文件

<script src="vue.min.js">script>

3.在html页面创建div标签,并给该div标签添加id属性

<div id="app">
div>

4.编写vue代码(vue代码就是如下这样固定的结构)

<script>
    // 创建一个vue对象
    new Vue({
        el: '#app',//绑定vue作用的范围
        data: {//定义页面中显示的模型数据
            message: 'Hello Vue!'
        }
    })
script>

el: '#app'作用是得到id为app的标签,向标签里面写内容,底层实际上就是以前学的$(“#app”)

5.使用插值表达式获取data里面定义的值

{}} 插值表达式，绑定vue中的data数据 -->
{{ message }}

6.完整的html代码如下:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    
    <div id="app">
        {}} 插值表达式，绑定vue中的data数据 -->
        {{ message }}
    div>
    <script src="vue.min.js">script>

    <script>
        // 创建一个vue对象
        new Vue({
            el: '#app',//绑定vue作用的范围
            data: {//定义页面中显示的模型数据
                message: 'Hello Vue!'
            }
        })
    script>
body>
html>

7.在空白处右键选择"Open with Live Server",去页面中看效果

3.2抽取代码片段

1.选择"文件–>首选项–>用户代码片段"

2.点击"新建全局代码片段文件…"

3.随意起个名字，点击"保存"后vscode会自动打开这个文件

4.将该文件中的所有代码都删掉

5.将如下代码复制粘贴到该文件中

{
	"vue htm": {
		"scope": "html",
		"prefix": "vuehtml",
		"body": [
			"DOCTYPE html>",
			"",
			"",
			"<head>",
			"    ",
			"    ",
			"    ",
			"    <title>Documenttitle>",
			"head>",
			"",
			"<body>",
			"    
",
			"",
			"    div>",
			"    ),然后通过浏览器访问这个html页面才可以使得js文件执行,有了node.js后,不需要浏览器,直接使用node.js就可以运行JavaScript代码
 
②模拟服务器效果,比如tomcat
 
6.2下载安装node.js
 
1.在Chrome地址栏输入https://nodejs.org/en/进入官网,然后点击"Other Downloads"
 
 
2.点击"All download options"
 
 
3.点击"…/"进入到上一级目录
 
 
4.找到和视频中版本一样的10.14.2点击进入
 
 
5.我的电脑是64位的,所以点击"node-v10.16.3-x64.msi"进行下载(我是复制下载链接用迅雷下载的)
 
 
6.下载完成后进行傻瓜式安装即可(注意:最好默认安装到c盘,不要去修改它的安装地址)
 
 
7.检查是否安装成功:
 
打开命令行窗口输入node -v命令,如果能看到版本号就说明安装成功
 
 
6.3使用node.js执行JavaScript代码
 
1.在axiosdemo文件夹下创建文件01.js并编写代码
 
console.log('hello nodejs')
 
 
2.找到上一步创建的01.js所在的文件夹,在地址栏输入cmd并按回车
 
 
3.在打开的命令行窗口输入node 01.js
 
 
6.4模拟服务器(了解)
 
1.在在axiosdemo文件夹下创建文件02.js并编写代码
 
const http = require('http');
http.createServer(function (request, response) {
    // 发送 HTTP 头部 
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 发送响应数据 "Hello World"
    response.end('Hello Server');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');
 
 
2.找到上一步创建的02.js所在的文件夹,在地址栏输入cmd并按回车进入该路径下的命令行窗口,在命令行窗口中输入node 02.js运行服务器程序
 
 
3.在地址栏输入http://localhost:8888/可以看到输出的html页面
 
 
4.在命令行窗口按ctrl+c停止服务
 
 
6.5在vscode打开cmd窗口,执行js代码
 
我们js代码是在vscode写的,但是执行js代码却是去命令行窗口执行,这样很不方便,解决办法是:直接在vscode中打开命令行窗口
 
1.右键axiosdemo选择"在终端中打开"
 
 
2.此时会跳出一个弹框,我们点击"自定义"
 
 
3.cmd和powershell都可以,我这里用的是cmd
 
 
4.在cmd窗口输入node 01.js可能提示'node'不是内部或外部指令,也不是可运行的程序或批处理文件。,如果提示这段话那就重启vscode试试,如果问题还没有解决那就以管理身份运行vscode(我重启vscode后问题就解决了)
 
 
5.将vscode重启后就可以正常执行01.js的js代码了
 
 
7.npm包管理工具
 
7.1npm简介
 
1.什么是npm:
 
NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，管理前端js依赖，联网下载js依赖。相当于后端的Maven 。
 
7.2安装npm
 
在安装node.js时会自动把npm也安装上。node.js默认安装的npm包和工具的位置:node.js目录\node_modules
 
 
在任意一个命令行窗口使用命令npm -v查看npm是否安装成功
 
 
7.3npm初始化项目
 
1.在工作区中创建一个npmdemo文件夹,然后右键该文件夹选择"在终端中打开"
 
 
2.使用命令npm init初始化该文件夹为一个前端项目
 
 
3.此时卡在这里了是吧,这是在等我们设置包名,如果我们我们什么也不输入就按回车那么包名就是括号中默认的npmdemo
 
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#package name: 项目包名/名称
#version: 项目版本号
#description: 项目描述
#entry point: 程序入口(后端入口一般是main方法,前端入口一般是js文件)
#keywords: {Array}关键词，便于用户搜索到我们的项目
 
我们这里都用默认的,什么也不用输入,一路回车就可以了
 
 
4.一路回车直到让我们确认信息时输入yes
 
 
5.至此,前端项目初始化完成,可以看到在npmdemo文件夹下有一个package.json文件,这个是包的配置文件,相当于maven的pom.xml,我们之后也可以根据需要对package.json进行修改
 
 
6.如果以后初始化的某个前端项目的package name、version、description等等都用默认的,上面的2、3、4这三步太繁琐了,可以直接用一个命令代替这三步:npm init -y
 
7.4npm下载js依赖
 
7.4.1配置npm使用淘宝镜像
 
如果不配置npm使用淘宝镜像就会从外网下载js依赖,很慢甚至会下载失败
 
在vscode的命令行窗口执行如下命令:
 
npm config set registry https://registry.npm.taobao.org
 
 
使用如下命令查看npm配置信息,看看我们是否配置淘宝镜像成功:
 
npm config list
 
 
7.4.2命令npm install 依赖名称@版本号
 
下载依赖的命令是npm install 依赖名称@版本号,如果不写@版本号就会下载最新版本的,为了避免以后有坑,我们用如下命令下载和老师版本一样(3.4.1版本)的jquery依赖。并且我们会发现下载jquery依赖后多了两个东西:文件夹node_modules和文件package-lock.json
 
npm install jquery@3.4.1
 
 
 
下载的依赖就在node_modules文件夹中
 
 
package-lock.json文件的作用:锁定当前下载的依赖的版本,只能下这个版本的,不能下别的版本的
 
 
7.4.3命令npm install
 
如果别人给我发的项目中没有存放依赖的node_modules文件夹(多数情况下都没有node_modules文件夹,因为这个文件夹通常会很大,小文件很多,部分依赖还不能跨平台 ),只有package.json和package-lock.json,那么我们通过如下命令就可以下载package-lock.json中记录的指定版本的依赖
 
npm install
 
 
 
7.4.4package.json和package-lock.json的区别
 
区别一:
 
package.json中依赖的版本号都有一个^,这表示向后(新)兼容依赖,因为jquery最新版本超过3.4.1并且最新版本的大版本和3.4.1版本的大版本(什么是大版本:3.4.1的大版本是3)相同,所以使用npm install命令下载jquery依赖时会下载最新版本的jquery依赖而不是下载package.json中记录的3.4.1版本的
但是执行npm install一定会下载package-lock.json中记录的指定版本的依赖,没有向后(新)兼容依赖这种说法
 
拿我们这个项目来举例并证明:
 
package.json中记录有jquery依赖:"jquery": "^3.4.1"我们这样做:①将项目中的node_modules文件夹和package-lock.json删掉
 
 
②在终端执行npm install命令下载依赖,执行完毕后就会给我们生成node_modules文件夹和package-lock.json
 
 
③发现我们刚刚下载的jquery依赖是最新版的3.6.0版本的而不是package.json中记录的3.4.1版本的
 
 
 
④我刚刚把"7.4.2命令npm install 依赖名称@版本号"中执行npm install jquery@3.4.1命令后生成的package-lock.json文件中的代码复制下来了,如下:
 
{
  "name": "npmdemo",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "jquery": {
      "version": "3.4.1",
      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.4.1.tgz",
      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
    }
  }
}

 
⑤我们先将第③步生成的package-lock.json文件中的代码全部删掉,然后将第④步列出的代码复制粘贴到package-lock.json文件中
 
 
⑥将node_modules文件夹删掉
 
 
⑦在终端执行npm install命令下载依赖
 
⑧执行完命令后会生成node_modules文件夹,我们去查看现在下载的jquery版本,发现下载的就是package-lock.json中指定的3.4.1版本而不再是下载最新版本
 
 
区别二:
 
比如说我项目下载了1.2版本的A依赖,A依赖又依赖于2.2版本的B依赖,那么package.json中只会记录A依赖及版本(但下载依赖时可能下载的是最新版的,详细解释看上面的"区别一"),而不会记录B依赖;但是package-lock.json中既记录A依赖及版本,又记录B依赖及版本
 
7.5其它命令(暂时混眼熟即可)
 
#当前工作区安装包、工具
npm install --save-dev webpack
#下面这个是npm install --save-dev webpack的简写
npm install -D webpack

#全局安装包、工具
npm install -global webpack
#下面这个是npm install -global webpack的简写
npm install -g webpack

#更新包（更新到最新版本）
npm update 包名

#全局更新
npm update -g 包名

#卸载包
npm uninstall 包名

#全局卸载
npm uninstall -g 包名
 
当前工作区安装的包、工具只能在当前工作区使用,在别的工作区是没办法用的
全局安装的包、工具:只要在node.js环境中,所有的工作区都可以使用
全局安装的包、工具的位置:用户目录\AppData\Roaming\npm\node_modules
 
8.babel转码器
 
8.1简介
 
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码
 
为什么我们需要将ES6代码转为ES5代码呢?因为我们现在写的代码都是es6代码,但是es6代码浏览器兼容性很差,低版浏览器有很多es6代码都是不认识的
 
8.2项目初始化
 
1.在工作区下创建一个babeldemo文件夹
 
 
2.在终端中使用命令npm init -y初始化项目
 
 
8.3安装命令行转码工具
 
Babel提供babel-cli工具,用于命令行转码,在终端用如下命令安装babel-cli工具(为了和老师的版本一样,我加了@6.26.0)
 
npm install --global babel-cli@6.26.0
 
 
安装完成后使用如下命令检查安装是否成功
 
babel --version
 
 
8.4编写es6代码
 
1.在babeldemo文件夹下创建文件夹es6,并在该文件夹下创建文件01.js,然后在该文件中编写es6的代码
 
// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)
 
 
怎么看是不是es6代码?
 
有一个最好分辨的方法:只要有箭头函数(参数 => 函数体)就一定是es6代码,因为箭头函数es5是没有的
 
8.5配置.babelrc
 
在项目的根目录下(也就是babeldemo文件夹下)创建配置文件.babelrc(只能是这个名字!!),这个文件是用来设置转码规则和插件,基本格式如下:
 
{
    "presets": [],
    "plugins": []
}
 
其中presets字段用来设定转码规则,我们将es2015规则加入.babelrc
 
{
    "presets": ["es2015"],
    "plugins": []
}
 
 
8.6安装转码器
 
使用如下命令在项目中安装es2015的转码器(@6.24.1是为了安装和老师一样的版本)
 
npm install --save-dev babel-preset-es2015@6.24.1
 
 
8.7进行转码
 
使用命令转码有两种方式:
 
根据文件转码
根据文件夹转码
 
8.7.1根据文件转码
 
1.先在babeldemo文件夹下创建两个文件夹:dist1和dist2
 
 
2.使用如下命令来完成"根据文件转码"
 
babel es6/01.js --out-file dist1/000001.js

#下面这个命令是上面那个命令的简写
babel es6/01.js -o dist1/000001.js
 
 
8.7.2根据文件夹转码
 
使用如下命令来完成"根据文件夹转码"
 
babel es6 --out-dir dist2

#下面这个命令是上面那个命令的简写
babel es6 -d dist2
 
 
9.模块化
 
9.1简介
 
后端中的模块化:我们开发后端接口(mapper、service、controller)时,在service注入mapper,在controller注入service,这样的话,通过注入这种方式,我们能够实现service调用mapper,controller调用service,也就是实现了不同类之间的调用。后端中类于类之间的相互调用就称为模块化操作
 
前端中的模块化:js与js之间的相互调用称为前端模块化操作,就比如说:在01.js中想调用000001.js中的方法,这就叫做模块化
 
 
9.2es5实现模块化操作
 
1.在工作区下创建一个moduledemo文件夹,然后在终端中使用命令npm init -y初始化项目
 
2.在moduledemo文件夹下创建文件夹es5module,并在该文件夹下创建文件01.js和02.js
 
 
3.在01.js中定义js方法供02.js调用
 
//1.在01.js中定义js方法供02.js调用
//定义成员：
const sum = function(a,b){
    return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}

//2.设置哪些方法可以被其他js调用
module.exports = {
    sum,
    subtract
}
 
 
module.exports = {...}的作用:01.js这些方法就相当于java中的私有方法,默认情况下不能在02.js中调用01.js中的方法,只有加上了module.exports = {...}才可以被别的js调用
 
4.在02.js中调用刚刚在01.js定义的方法
 
//在02.js中调用刚刚在01.js定义的方法
//1.引入01.js文件
const m = require('./01.js')

//2.调用
console.log(m.sum(1, 2))
console.log(m.subtract(10, 3))
 
 
./表示当前文件所在的目录
../表示当前文件所在的目录的上一级目录
我们在学习后端时可能有时就会省略.,但这个一定不能省略,否则会报错
require的参数单引号或双引号都可以
 
5.在终端中使用命令node 02.js查看结果
 
 
9.3es6实现模块化操作
 
9.3.1第一种写法
 
1.因为:如果使用es6写法实现模块化操作,在node.js环境中是不能直接运行的,需要使用babel把es6代码转换为es5代码,才可以在node.js中运行,babeldemo文件夹已经配置好了babel转码器,所以呢,为了方便,我们接下来的例子就在babeldemo文件夹下实行。
 
在babeldemo文件夹下创建文件夹modulees61,并在该文件夹下创建文件01.js和02.js
 
 
2.在01.js中定义方法,并且设置哪些方法可以被其它js调用
 
//在01.js中定义方法,并且设置哪些方法可以被其它js调用
export function getList() {
    console.log('getList......')
}

export function save() {
    console.log('save......')
}
 
 
3.在02.js中调用刚刚在01.js定义的方法
 
import { getList, save } from './01.js'

//调用方法
getList()
save()
 
 
from后面单引号或双引号都可以
 
4.将es6模块化代码转换为es5模块化代码
 
先在babeldemo文件夹下创建一个文件夹modulees611,然后在终端执行如下命令来根据文件夹进行转码
 
babel modulees61 -d modulees611
 
 
5.在终端中使用命令node 02.js查看结果
 
 
9.3.2第二种写法
 
1.在babeldemo文件夹下创建文件夹modulees62,并在该文件夹下创建文件01.js和02.js
 
 
2.在01.js中定义方法,并且设置哪些方法可以被其它js调用
 
export default {
    getList() {
        console.log('getList......')
    },
    save() {
        console.log('save......')
    }
}
 
 
3.在02.js中调用刚刚在01.js定义的方法
 
import m from './01.js'

//调用方法
m.getList()
m.save()
 
 
可以将这里的m理解为java中的对象
./01.js中的.js可以省略
 
4.将es6模块化代码转换为es5模块化代码
 
先在babeldemo文件夹下创建一个文件夹modulees622,然后在终端执行如下命令来根据文件夹进行转码
 
babel modulees62 -d modulees622
 
 
5.在终端中使用命令node 02.js查看结果
 
 
10.webpack
 
10.1简介
 
Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
 
webpack的好处:Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，这就就减少了页面的请求次数
 
10.2项目初始化
 
1.在工作区下创建一个webpackdemo文件夹
 
2.在终端中使用命令npm init -y初始化项目
 
 
10.3安装webpack工具(插件)
 
使用如下命令安装webpack和webpack-cli(webpack的4.41.4是老师的版本,webpack-cli我实在不知道老师用的什么版本,秉承着不用最新的原则我用了3.3.2版本的)
 
npm install -g webpack@4.41.4 webpack-cli@3.3.2
 
 
安装完成后使用如下命令检查是否安装成功
 
webpack -v
webpack-cli -v
 
 
10.4创建js文件用于打包操作
 
在webpackdemo文件夹下创建文件夹src,在src下创建js文件common.js、utils.js、main.js,这三个js文件中我们打算:在common.js和utils.js中定义方法,然后在main.js中引入common.js和utils.js并调用它们的方法。接下来我们分别在这三个js文件中编写代码
 
common.js:
 
//方法名字是info,这个方法可以被别的js调用
exports.info = function (str) {
    document.write(str);//在浏览器中输出
}
 
 
utils.js:
 
//方法名字是add,这个方法可以被别的js调用
exports.add = function (a, b) {
    return a + b;
}
 
 
main.js:
 
//在main.js中引入common.js和utils.js并调用它们的方法
const common = require('./common.js');
const utils = require('./utils.js');
common.info('Hello common!' + utils.add(1, 2));
 
 
10.5js打包
 
1.在webpack文件夹下创建文件夹dist,用于存放打包后的文件
 
2.在webpack文件夹下创建配置文件webpack.config.js并编写配置
 
配置文件的名字是固定的
配置文件中的内容是固定结构
 
const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出的文件的名字
    }
}
 
 
entry是程序入口,因为main.js中有另外两个文件,所以main.js就是程序入口,所以这里写./src/main.js
 
3.使用命令执行打包操作
 
webpack #有黄色警告
webpack --mode=development #没有警告
webpack --mode=production #没有警告
 
以上三个命令都可以执行打包操作,如果用第一种的webpack命令会有黄色警告,警告的大致意思就是建议你选择development环境或production环境,也就是建议你用
 
命令webpack --mode=development或webpack --mode=production,这里我在终端使用webpack --mode=development命令执行打包操作。执行完打包操作后会发现dist文件夹下多了一个bundle.js文件,这就是打包后的文件
 
 
4.测试
 
因为我们在common.js中写了这样一行代码:document.write(str); ,这行代码在node.js中是无法执行的,只有在浏览器中才可以看到效果,所以测试步思路是:在webpack文件夹下创建一个01.html文件,并在该文件中引入第3步打包得到的js文件
 
<script src="dist/bundle.js">script>
 
 
在空白处右键选择"Open with Live Server"去浏览器中看效果
 
 
 
10.6css打包
 
1.在src文件夹下创建style.css文件,并编写样式内容
 
body {
    background-color: red;
}
 
 
2.在main.js中添加如下一行代码,用于引入上一步创建的css文件
 
//引入css文件
require('./style.css')
 
 
注意:我们以前说过:因为默认是引入js文件,所以可以省略.js,比如const common = require('./common'); ,但是引入css文件时一定不能省略.css
 
3.Webpack本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader可以理解为是模块和资源的转换器。
 
我们需要安装相关Loader插件：css-loader是将css装载到javascript；style-loader是让javascript认识css
 
在终端中使用如下命令安装css加载工具(@1.1.3和@3.4.2是为了和老师安装一样的版本)
 
npm install --save-dev style-loader@1.1.3 css-loader@3.4.2
 
 
4.在webpack.config.js配置文件中添加配置
 
webpack.config.js配置文件中的完整内容:
 
const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出的文件的名字
    },
    module: {
        rules: [
            {
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}
 
截图如下(相比于"10.5js打包"的第2步编写的webpack.config.js配置,增加了一些代码,增加的代码我用方框圈起来了)
 
 
5."10.5js打包"的第3步在dist文件夹下生成了一个bundle.js文件,先将这个文件删掉,然后执行打包操作。和"10.5js打包"的第3步一样,执行打包操作时有三种命令供你选择,我这里使用命令webpack --mode=development执行打包。执行完打包操作后会发现dist文件夹下多了一个bundle.js文件,这就是打包后的文件
 
 
6.在01.html文件的空白处右键选择"Open with Live Server"去浏览器中看效果