webpack（重点）

前准备

yarn包管理器

==注意: 如果yarn实在安装不上可以用npm==

快速、可靠、安全的依赖管理工具。(类似npm作用)

中文官网地址: Yarn 中文文档

下载yarn

下载地址: 安装 | Yarn 中文文档

windows - 软件包(在笔记文件夹里)
- ==建议不要安装到中文路径下==
- ==建议和node安装到一个盘符下==
mac - 通过命令安装(也可还用npm)

sudo npm i -g yarn

如果上面不行, 试试这个

curl -o- -L https://yarnpkg.com/install.sh | bash

使用yarn

与npm类似, 可以试试, 新建一个空白文件夹, 执行以下命令尝试一下

# 1. 初始化, 得到package.json文件(终端路径所在文件夹下)
yarn init
# 类似: npm init# 2. 添加依赖(下包)
# 语法: yarn add [package]
# 语法: yarn add [package]@[version]
yarn add jquery
yarn add jquery@3.5.1
# 类似: npm install jquery# 3. 移除包
# 语法: yarn remove [package]
yarn remove jquery
# 类似: npm remove jquery# 4. 安装项目全部依赖(一般拿到别人的项目时, 缺少node_modules)
yarn
# 会根据当前项目package.json记录的包名和版本, 全部下载到当前工程中
# 类似: npm i# 5. 全局
# 安装: yarn global add [package]
# 卸载: yarn global remove [package]
# 注意: global一定在add左边
yarn global add @vue/cli
# 如何使用, 为明天学习vue做铺垫
# 类似: npm install -g @vue/cli

yarn可能遇到的问题

如果报错参考报错文档: 报错总结

建议安装的vscode插件

文件夹和文件的关系, 和该创建文件, 不要创建文件夹了

知识点自测

对这些知识点了如指掌, 学习今天的内容会轻松很多

如何使用ES6模块化
默认导出和导入

// 默认导出
export default {a: 10,b: 20
}// 默认导入
import Obj from 'js文件路径'

// 按需导出

// 按需导出
export {a: 10,b: 20
}
// 按需导入
import {a, b} from 'js文件路径'
import * as Obj from 'js文件路径' // 搜集*所有按需导出, 合并到变量obj中

无导出和导入(只为让js代码执行)

// 无导出
Array.prototype.MyForEach = function(){// ...内部实现略
}// 无导入
import "js文件路径"// 后面用数组就可以调用MyForEach方法了

字体图标的使用
1. 去阿里巴巴矢量图标库, 选中想要的图标, 登录后, 生成css文件和字体文件
2. 下载css文件和字体文件, 也可以使用在线地址
3. 在自己页面中引入iconfont.css, 并在想显示字体图标的标签上使用类名即可
==箭头函数非常熟练, 伸手就写==

// 1. 基础定义
const fn = () => {}
fn()// 2. 有参, 有返回值
const fn2 = (a, b) => {return a + b}
fn(10, 20); // 结果是30// 3. 参数"只有一个", 省略()
const fn3 = a => {return a * 2}
fn(50); // 结果是100// 4. 函数体"只有一句"可以省略大括号和return, "默认返回这句话结果"给函数调用地方
const fn4 = a => a * 2;
fn(50); // 结果是100

什么是服务器, 本地如何搭建服务器, 服务器和浏览器关系, 什么是请求和响应

// 1. 什么是服务器
// 服务器是一台性能高, 24小时可以开机的电脑
// 服务器可以提供服务(例如: 文件存储, 网页浏览, 资源返回)

// 2. 本地如何搭建服务器
// 安装node软件环境, 下载express模块包, 编写相关代码, 即可得到一个web服务器, 给前端返回资源

// 3. 服务器和浏览器的关系
// 浏览器不负责保存网页, 都要靠着url地址去服务器后端, 请求网页相关代码, 回来在浏览器上解析显示
// 浏览器也不负责保存数据, 如果是前后端分离项目, 也要用ajax调用后端接口, 拿到数据回到浏览器上铺设显示

// 4. 请求和响应区别
// 浏览器 -> 请求资源 -> 服务器

// 浏览器 <- 响应数据 <- 服务器

开发环境和生产环境以及英文"development", "production" 2个单词会写会读
初始化包环境和package.json文件作用

// npm下载的包和对应版本号, 都会记录到package.json文件里
// 把项目发给别人, 他也用包管理器, 一个命令就能下载你项目需要的所有第三方依赖包

终端的熟练使用: 切换路径, 清屏, 包下载命令等

切换路径  cd

清屏 cls 或者 clear

对base64字符串, 图片转base64字符串了解在线装换图片base64图片在线转换工具 - 站长工具

1.webpack-概念

现代 javascript 应用程序的 静态模块打包器 (module bundler)
- 静态: 文件资源
- 模块: node环境, 引入文件, 遵守模块化语法
除了合并代码, 还可以翻译和压缩代码
- less/sass -> css
- ES6/7/8 -> ES5
- html/css/js -> 压缩合并

2.webpack-使用前-准备

目标

用webpack, 需要准备什么

软件

webpack依赖Node环境

npm或yarn等模块管理工具

步骤

创建Day01_webpack基础使用文件夹
初始化包环境

yarn init

安装依赖包

为何指定版本: 防止以后包更新, 造成课程内容报错

yarn add webpack@5.31.2 webpack-cli@4.6.0 -D

在package.json中, 配置scripts(自定义命令)

scripts: {"build": "webpack"
}

步骤

新建src/add/add.js - 定义求和函数导出

export const addFn = (a, b) => a + b

新建src/index.js导入使用

// webpack打包的入口
import { addFn } from './add/add'
console.log(addFn(5, 2));

运行打包命令

yarn build

效果

src并列处, 生成dist目录和main.js文件
查看main.js文件, 是打包压缩后的代码

(()=>{"use strict";console.log(7)})();

4.webpack-更新打包

目标

代码变化, 如何打包

步骤

新建src/tool/tool.js - 导出数组求和方法

export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)

src/index.js - 导入使用

import { addFn } from './add/add'
import { getArrSum } from './tool/tool'

console.log(addFn(5, 2));
console.log(getArrSum([5, 6, 9, 10]));

重新打包

yarn build

效果

自动覆盖原dist, 结果压缩极致

(()=>{"use strict";console.log(7),console.log([5,6,9,10].reduce(((o,e)=>o+e),0))})();

5.webpack-配置修改

目标

修改默认入口和出口

默认入口: src/index.js

默认出口: dist/main.js

步骤

配置文档

项目根目录 - 新建webpack.config.js文件 (默认配置文件名)
填入配置项

const path = require("path")

module.exports = {entry: "./src/main.js", // enter: 默认入口output: { path: path.join(__dirname, "dist"), // 出口"文件夹"名filename: "bundle.js"               // 出口"文件"名}
}

修改代码里src/index.js 为 src/main.js
重新打包观察输出文件名字

6.webpack-打包流程图

目标

运行yarn build发生了什么

图示流程

敲击命令, 代码执行过程

代码源文件和webpack之间关系图

源码一定要和入口产生直接/间接引入关系, 才会被一起打包

7.webpack-案例-发送ajax

目标

webpack打包前端项目

yarn下的包, 如何作用在前端项目

步骤

回顾从0准备环境
- 初始化包环境
- 下载依赖包
- 配置自定义打包命令
下载jquery

yarn add axios

新建public/index.html - 前端首页
新建src/main.js - webpack打包入口

index.html 准备一些li

<!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>Document</title>
</head>
<body><button>按钮</button></body>
</html>

在src/main.js引入jquery

import axios from 'axios'

main.js中编写, 隔行变色代码

document.querySelector("button").onclick = function() {axios({url: 'http://www.liulongbin.top:3009/api/getbooks'}).then(({data:res}) => {console.log(res);});
}

执行打包命令

yarn build

把public/index.html手动复制到dist下

再手动引入打包后bundle.js

<script src="../dist/bundle.js"></script>

关键

yarn下的包, 在js文件里, 用import语法导入

浏览器不支持import语法
webpack翻译打包后输出到bundle.js
html页面引入翻译打包后的js即可正常使用

8.webpack-插件-自动生成html文件

目标

学习webpack插件html-webpack-plugin

自动生成html文件

自动引入打包后文件

步骤

html-webpack-plugin插件文档

下载插件

yarn add html-webpack-plugin@5.3.1  -D

webpack.config.js配置

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = {// ...省略其他代码plugins: [new HtmlWebpackPlugin({// 以此为基准生成打包后html文件template: './public/index.html' })]
}

重新打包后观察dist下
- 自动生成html文件
- 自动引入打包后js文件

总结: webpack就像一个人, webpack.config.js是人物属性, 给它穿什么装备它就干什么活

9.webpack-加载器-处理css文件问题

目标

webpack能否打包css文件

步骤

1.新建 - src/css/index.css

2.编写去除li圆点样式代码

button {width: 200px;height: 50px;
}

3.==在main.js引入index.css==

一定要引入到入口才会被webpack打包

import "./css/index.css"

4.执行打包命令观察效果

错误解释: 你可能需要一个loader来支持这种类型文件, 解析css代码

原因: webpack默认只识别js文件

10.webpack-加载器-处理css文件

目标

学习loader加载器, 打包更多类型文件

步骤

style-loader文档

css-loader文档

安装依赖

需要这2个模块包, 帮助webpack打包css
```
yarn add css-loader@5.2.1 style-loader@2.0.0  -D
```

webpack.config.js 配置

module.exports = {// ...其他代码module: { // 如何处理项目中不同模块文件rules: [ // 规则{test: /\.css$/, // 匹配所有的css文件// use数组里从右向左运行// 先用 css-loader 让webpack能够识别 css 文件的内容并打包// 再用 style-loader 将样式, 把css插入到dom中use: [ "style-loader", "css-loader"]}]}
}

执行打包命令, 观察打包后dist下

效果

css代码被打包进了dist/bundle.js中
运行时, css代码插入到html的style标签中

11.webpack-加载器-处理less文件

目标

学习less-loader处理.less文件

步骤

less-loader文档

新建src/less/index.less - 设置li字体大小24px

@size:24px;

body {button {font-size: @size;}
}

引入到main.js中

import "./less/index.less"

下载依赖包

yarn add less@4.1.1 less-loader@8.1.0 -D

webpack.config.js 配置

module: {
rules: [
// ...省略其他
{
test: /\.less$/, // 匹配.less结尾文件
// 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
use: [ "style-loader", "css-loader", 'less-loader']
}
]
}

总结: 只要找到对应的loader加载器, 就能让webpack处理不同类型文件

12.webpack-加载器-处理图片文件

目标

配置webpack, 打包图片文件

步骤

素材文件夹/2个图文件
在css/less/index.less - 把小图片用做背景图

body{background: url(../assets/logo_small.png) no-repeat center;
}

在src/main.js - 把大图插入到创建的img标签上, 添加body上显示

// 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

webpack（重点）相关推荐

pwa+webpack，初探与踩坑
0.前言我们都知道pwa是一个新技术.,依靠缓存,离线了还能正常跑,而且秒开.我把以前原生写的小游戏迁移到react,再迁移到webpack+react,最后再升级到pwa.具体介绍不多说,我们开始 ...
vue js中报红_vue：我和node、webpack的情深似海
本节篇幅较长,小伙伴要耐心读完,相信对vue的启动原理会有更好的认识. 前言上节我们简单说了一下,在我们创建完一个vue项目的时候,执行 npm run serve命令所发生的一些,不过因为篇幅的原 ...
进击webpack 4 （基础篇一）
主题本文为webpack的基础部分, 旨在如何从0搭建一个工程环境,并简单介绍打包之后生成什么代码, 并且介绍webpack的常用的各种loader,plugin的配置跟解决了什么问题本篇为第一 ...
使用webpack、vue来开发一个todo项目
luxurybug有话说: 我是从有道云笔记中粘贴过来的,图片不显示, 请点击链接,查看完整笔记:点我!有道云笔记 part1.开始,简单的配置一.准备工作 webpack webpack-dev- ...
学点Webpack吧
开始 webpack 之旅 npm install webpack --save-dev 这里如果没有指定 -g全局安装,那么需要调用 node_modules 下的 webpack.js 来执行,因 ...
RAP、Mock.js、Vue.js、Webpack
最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...
webpack简单配置
webpack有4个重点内容: 入口(entry):指示webpack 应该使用哪个模块,来作为构建其内部依赖图的开始输出(output):告诉 webpack 在哪里输出它所创建的 bundles ...
react源代码重点难点分析
网上已经有不少react源码分析文档,但都是分析主流程和主要功能函数,没有一个是从reactDOM.render()入口开始分析源码把流程逻辑走通尤其是把重点难点走通直到把组件template编译插入 ...
webpack从零开始第2课: 配置文件
webpack目录第1课: 安装webpack和webpack-dev-server 第2课: 配置文件第3课: 做为node的一个模块来使用第4课: 插件篇第5课: 模块篇第6课: 在Vu ...