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

1.webpack-概念

 

  • 现代 javascript 应用程序的 静态模块打包器 (module bundler)

    • 静态: 文件资源

    • 模块: node环境, 引入文件, 遵守模块化语法

  • 除了合并代码, 还可以翻译压缩代码

    • less/sass -> css

    • ES6/7/8 -> ES5

    • html/css/js -> 压缩合并

 

2.webpack-使用前-准备

目标

用webpack, 需要准备什么

软件

webpack依赖Node环境

npm或yarn等模块管理工具

步骤

  1. 创建Day01_webpack基础使用文件夹

  2. 初始化包环境

yarn init
  1. 安装依赖包

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

yarn add webpack@5.31.2 webpack-cli@4.6.0 -D
  1. 在package.json中, 配置scripts(自定义命令)

scripts: {
    "build": "webpack"
}

步骤

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

export const addFn = (a, b) => a + b
  1. 新建src/index.js导入使用

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

yarn build

效果

  1. src并列处, 生成dist目录和main.js文件

  2. 查看main.js文件, 是打包压缩后的代码

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

 

4.webpack-更新打包

目标

代码变化, 如何打包

步骤

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

export const getArrSum = arr => arr.reduce((sum, val) => sum += val, 0)
  1. 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]));
  1. 重新打包

yarn build

效果

  1. 自动覆盖原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

步骤

配置文档

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

  2. 填入配置项

const path = require("path")
​
module.exports = {
    entry: "./src/main.js", // enter: 默认入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口"文件夹"名
        filename: "bundle.js"               // 出口"文件"名
    }
}
  1. 修改代码里src/index.js 为 src/main.js

  2. 重新打包观察输出文件名

6.webpack-打包流程图

目标

运行yarn build发生了什么

图示流程

  1. 敲击命令, 代码执行过程

 

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

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

 

7.webpack-案例-发送ajax

目标

webpack打包前端项目

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

步骤

  1. 回顾从0准备环境

    • 初始化包环境

    • 下载依赖包

    • 配置自定义打包命令

  2. 下载jquery

yarn add axios
  1. 新建public/index.html - 前端首页

  2. 新建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
  1. 把public/index.html手动复制到dist下

 再手动引入打包后bundle.js

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

关键

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

    浏览器不支持import语法

  2. webpack翻译打包后输出到bundle.js

  3. html页面引入翻译打包后的js即可正常使用

 

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

目标

学习webpack插件html-webpack-plugin

自动生成html文件

自动引入打包后文件

步骤

html-webpack-plugin插件文档

  1. 下载插件

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' 
        })
    ]
}
  1. 重新打包后观察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文档

  1. 安装依赖

    需要这2个模块包, 帮助webpack打包css

    yarn add css-loader@5.2.1 style-loader@2.0.0  -D
  2. webpack.config.js 配置

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

效果

  1. css代码被打包进了dist/bundle.js中

  2. 运行时, css代码插入到html的style标签中

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

目标

学习less-loader处理.less文件

步骤

less-loader文档

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

@size:24px;
​
body {
    button {
        font-size: @size;
    }
}
  1. 引入到main.js中

import "./less/index.less"
  1. 下载依赖包

yarn add less@4.1.1 less-loader@8.1.0 -D
  1. 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, 打包图片文件

步骤

  1. 素材文件夹/2个图文件

  2. 在css/less/index.less - 把小图片用做背景图

body{
    background: url(../assets/logo_small.png) no-repeat center;
}
  1. 在src/main.js - 把大图插入到创建的img标签上, 添加body上显示

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值