Webpack 基础入门以及接入 CSS、Typescript、Babel

一、什么是 Webpack

Webpack 是一款 JS 模块化开发的技术框架,其运作原理是将多个 JS 文件关联起来构成可运行的应用程序。

Webpack 拥有丰富的 plugins / loaders 插件生态圈,可以让 js 识别不同的语言如 .css, .scss, .sass, .json, .xml, .ts, .vue, .tsx 等等,这也让 Webpack 至今仍然在许多项目中仍有一席之地。

尽管现在的构建工具百花齐放,如 vite, vue-cli, craco, esbuild, glup, rollup
但大部分构建工具的许多概念基本都是相通的,我认为学习 webpack 依然是前端人员必学技能之一。

二、使用 Webpack

2.1 准备工作

  1. 新建案例项目 webpack-example

  2. 安装 Webpack

mkdir webpack-example && cd webpack-example
yarn init -y
yarn add webpack webpack-cli -D

当前 Webpack 版本:5.88.2

  1. 新建目录&文件
mkdir src && cd src && touch index.js
cd ../ && touch index.html

结构如下:
在这里插入图片描述

2.2 编译&打包

这里分几个步骤:

  1. index.js 代码改造:
const sayHi = () => {alert('Hello, webpack!')
}
sayHi()
  1. package.json 配置 webpack 脚本并执行。
"scripts": {"build": "webpack"},

在这里插入图片描述
构建后的产物默认会放在 dist 目录。

  1. index.html 引入产物
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./dist/main.js"></script>
</head>
<body></body>
</html>

本地 server 打开 index.html 即可:
在这里插入图片描述
你可能会问,这和直接引入 src/index.js 有何区别?别急,还没体现 webpack 能力呢。

继续改造:

  1. src/ 新增 date.js & tools.js 俩文件 ,内容如下:
// src/date.js
export const getDate = () => {return new Date().toLocaleDateString()
}
// src/tools.js
export const add = (a, b) => {return a + b
}
  1. 在 src/index.js 中引入:
// 引入👇
import { getDate } from './date'
import { add } from './tools'const run = () => {console.log('The date is: ', getDate())console.log('10 + 20 is equal', add(10, 20))
}
run()
  1. 重新 build
    在这里插入图片描述
    可以看到 date.js 和 tools.js 被一起打包进 main.js 文件,模块化开发概念有没有逐渐涌现出来?

在这里插入图片描述

三、接入 CSS

截至目前,我们依旧未使用 webpack 配置的能力,仅通过一个 build 命令。

现在开始思考下,在不依赖 webpack 的情况下,js 中引入 css 文件可行?

当然没问题,现代浏览器基于 ES6 语法可以直接引入 css 文件。
但你会发现引入后抛出 MIME 错误,这是因为它只负责请求,不负责非 JS 响应资源处理。
在这里插入图片描述

下面用 webpack 配置来解决。

3.1 准备工作

  1. 安装依赖包:
yarn add style-loader css-loader -D

解释:css-loader 将 css 内容打包成 CommonJS ,style-loader 引入 CommonJS 并将其插入到页面 style 中,这两个是必不可少的。

3.1 配置&使用

  1. 项目新建 webpack.config.js 文件,内容如下:
module.exports = {module: {rules: [{test: /\.css$/i,use: ['style-loader', 'css-loader'],},],},
};

解释:rules 作为引入 loader 的入口,test 表示要处理匹配的文件后缀名。
rules 的选项还有很多,这里仅以最简单的方式作为演示。
use 执行顺序从最后开始: css-loader -> style-loader 。

  1. src/ 新增 index.css 文件,样式如下:
body {background-color: cyan;
}
  1. src/index.js 引入
// ...
import './index.css'
// ...
  1. 调整 package.json build 脚本,指定配置:
"scripts": {"build": "webpack --config=webpack.config.js"},
  1. 重新 build 即可看到效果:
    在这里插入图片描述

在 dist/ 产物中可以看到,css 样式是通过 JS 插上去的,你可能会问,这和在 index.html 中直接引入 css 有何不同?

关于这个问题,我想说如果是 100 个 css 呢?毕竟一个项目的 css 文件数量是非常多的。
再比如像 scss, less 这些 CSS 预处理语言的文件呢,总不可能手动引入吧?

还是得靠 webpack ,只需引入对应的插件和 loader 即可;为了让 webpack 入门纯粹点,这里不再详细赘述。

四、接入 Typescript

随着越来越多的项目引入 TS,似乎就成了前端必学的“新语言”~

如果还没用过 Typescript 的同学可参考:TypeScript 日常基本语法 再回头看本文。

4.1 准备工作

  1. 安装依赖包
yarn add typescript ts-loader -D

解释:typescript 是一款专门将 ts 编译成 js 的工具,本身可以独立存在,而 ts-loader 充当 typescript 与 webpack 之间的信号传递者。

4.2 配置&使用

  1. webpack.config.js 中配置如下:
module.exports = {module: {rules: [{test: /\.css$/i,use: ['style-loader', 'css-loader'],},// 新增👇{test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/, // 不处理 node_modules 。},],},resolve: {// 调整后缀解析优先级。extensions: ['.ts', '.tsx', '.js'],},
};

提示:配置 extensions 的原因是,Webpack 默认以 src/index 作为编译入口,再根据默认后缀优先级顺序: [‘js’, ‘json’, ‘.wasm’] 开始解析,为了避免解析现有的 index.js,这里要手动调整 extensions ,当然也可以设置 entry ,这里先不演示,后面会讲到。

  1. src/下新增 index.ts 文件,内容如下:

import { getDate } from './date'
import { add } from './tools'
import './index.css'
// 这里用 TS 提供的 void 语法作为测试。
const run = (): void => {console.log('The date is: ', getDate())console.log('10 + 20 is equal', add(10, 20))
}
run()
  1. 重新 build,效果和原来一样:
    在这里插入图片描述

五、接入 Babel

balbel 是一款是专门将 JS 高级语法编译为可执行的低版本语法编译器,比如 ES6/7/8 -> ES5。
如果还没用过的同学可参考:JS & 介绍 Babel 的使用及 presets & plugins 的概念 再回头看文本。

5.1 准备工作

  1. 安装依赖:
yarn add babel-loader @babel/core @babel/preset-env -D

解释:
- @babel/core 是编译 JS 的核心逻辑,即编译器。
- @babel/preset-env 基于编译器,集成了各种插件,比如 es6 -> es5, class -> prototype,链式 ?. 语法等。
- balbel-loader 充当 @babel/core 与 webpack 之间的信号传递者。

5.2 配置&使用

  1. webpack.config.js
module.exports = {// 新增:开启本地调试模式,让产物不要压缩。mode: 'development',// 新增:指定编译入口,避免与上章节的 index.ts 冲突。entry: './src/index.js',module: {rules: [{test: /\.css$/i,use: ['style-loader', 'css-loader'],},{test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/,},// 新增:{test: /\.(?:js|ts)$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: [['@babel/preset-env']]}}}],},
};
  1. index.js 中使用高版本语法作为演示,比如 ES6 的 const 声明关键字:
const run = () => {console.log('The date is: ', getDate())console.log('10 + 20 is equal', add(10, 20))
}
run()
  1. 重新 build,在 dist/main.js 源码中便可看到 const 被转成了 var
    在这里插入图片描述

5.3 babel 兼容 ts

  1. 先将 entry 引入为 ./src/index.ts
// webpack.config.js
...
entry: './src/index.ts',
...
  1. src/index.ts 语法如下,这里用 void 作为演示:
import './index.css'
const run = (): void => {const obj = { num: 100 }console.log('Hello, webpack', obj?.num === 100)
}
run()
  1. 执行 build
yarn build

你会发现 babel 并不识别 .ts 文件,直接报错了:

在这里插入图片描述
这是因为 babel 默认仅支持 JS,对于 TS 还得单独处理:

  1. 安装 Babel 插件:
 yarn add @babel/preset-typescript -D

解释:

  • babel/preset-typescript 是基于 babel-core 编译器实现出来的插件,就是让 babel 可识别 .ts 后缀。

注意:插件本身不负责编译 ts -> js,仅仅对 ts 源码以 js 的角度来进行转换处理。

  1. 引入插件:
module.exports = {mode: 'development',entry: './src/index.ts',module: {rules: [{test: /\.css$/i,use: ['style-loader', 'css-loader'],},{test: /\.tsx?$/,use: 'ts-loader',exclude: /node_modules/,},{test: /\.(?:js|ts)$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: [['@babel/preset-env',],// 新增:['@babel/preset-typescript',]],}}}],},
};
  1. 重新 build 即可:
    在这里插入图片描述

F Q A

4.1 Webpack 和 Babel 有什么区别?

咋一看,Webpack 和 Babel 好像都能编译 JS?这两者间有何区别呢?其实区别还是蛮大的:

  1. Webpack 就像一位 JS 文件管理者,拥有着大量的处理不同文件&产物的插件圈,最终将各种文件联起来形成页面应用。
  2. Babel 可以将 JS 代码编译为可向下兼容运行的低版本代码,它也有着丰富的插件圈,但它们是专门与 js 源码打交道的,这也是与 webpack 最大的区别。

换个角度想,如果 webpack 和 babel 都是干同一份工作,那两者就不可能一起运作,属矛盾关系。

4.2 Webpack 文档资料过于庞大,有必要全阅读完?

这是完全没必要的,每个人的工作性质都不一样,用到哪看到哪儿即可,过不了多久还是会忘记。

4.3 Webpack 是不是过时了?

Webpack 从配置概念上看并不过时,它就像构建工具们的老师,可以从中学到许多东西。


完!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/94558.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Web版Photoshop来了,用到了哪些前端技术?

经过 Adobe 工程师多年来的努力&#xff0c;并与 Chrome 等浏览器供应商密切合作&#xff0c;通过 WebAssembly Emscripten、Web Components Lit、Service Workers Workbox 和新的 Web API 的支持&#xff0c;终于在近期推出了 Web 版 Photoshop&#xff08;photoshop.adobe…

BL808学习日志-2-LVGL for M0 and D0

一、lvgl测试环境 对拿到的M1S_DOCK开发板进行开发板测试&#xff0c;博流的官方SDK是支持M0和D0两个内核都进行测试的&#xff1b;但是目前只实现了M0的LVGLBenchmark&#xff0c;测试D0内核中发现很多莫名其妙的问题。一会详细记录。 使用的是开发板自带的SPI显示屏&#xff…

wzsc_文件上传(条件竞争)

打开题目链接&#xff0c;很常见的文件上传框 经过尝试&#xff0c;发现上传东西后会调用upload.php&#xff0c;猜测文件被传到upload目录下 随便传了几个类型的文件&#xff0c;访问upload目录 发现.php文件以及.htaccess、.user.ini这种配置文件都没有传上去 但是通过抓包…

Redis相关概念

1. 什么是Redis&#xff1f;它主要用来什么的&#xff1f; Redis&#xff0c;英文全称是Remote Dictionary Server&#xff08;远程字典服务&#xff09;&#xff0c;是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库&#xff0c;并提…

深入探讨 Presto 中的缓存

【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 Presto是一种流行的开源分布式SQL引擎&#xff0c;使组织能够在多个数据源上大规模运行交互式分析查询。缓存是一种典型的提高 Presto 查询性能的优化技术。它为 Prest…

阿里云新账户什么意思?老用户、产品首购详细说明

阿里云新账户、老账号、产品首购和同人账号什么意思&#xff1f;阿里云账号分为云新账户、老账户、产品首购、同人账号和同一用户&#xff0c;阿里云官方推出的活动很多是限制账号类型的&#xff0c;常见的如阿里云新用户&#xff0c;什么是阿里云新用户&#xff1f;是指从未在…

408计网应用层总结

网络应用模型 ■客户/服务器模型&#xff08;C/S&#xff09;&#xff1a;客户是服务请求方&#xff0c;服务器是服务提供方 ■P2P模型&#xff1a;各主机都是客户&#xff0c;也都是服务器&#xff08;任意一对计算机成称为对等方&#xff09; 注&#xff1a; 1.客户…

Overloud TH-U Complete for Mac:演绎您的音乐世界

Overloud TH-U Complete for Mac是一款功能强大的吉他谱曲软件&#xff0c;可以让您在Mac电脑上轻松进行吉他模拟、录音和混音等操作&#xff0c;创作属于自己的音乐作品。 Overloud TH-U Complete for Mac提供了丰富的吉他模拟和音效库&#xff0c;涵盖了多种吉他放大器、箱体…

Autosar深入-MPU

MPU目录 MPU介绍MPU相关概念一、MPU原理和作用二、AUTOSAR OS SC3/4功能:内存保护2.1 Davinci实践1.特权/用户都可读写(区域1)2.属于区域1的子集(区域2)3.仅用户读写三、ld文件配置四、代码中指定变量区域五、编译输出的.map文件MPU介绍 MPU : Memory Protection Unit: 内…

云原生定义整理

云原生定义整理 Pivotal 是云原生应用的提出者&#xff0c;并推出了 Pivotal Cloud Foundry 云原生应用平台和 Spring 开源 Java 开发框架&#xff0c;成为云原生应用架构中先驱者和探路者。 Pivotal最初的定义 Pivotal公司的Matt Stine在2015年写了一本叫做<<迁移到云…

计算机考研 | 2016年 | 计算机组成原理真题

文章目录 【计算机组成原理2016年真题44题-9分】【第一步&#xff1a;信息提取】【第二步&#xff1a;具体解答】 【计算机组成原理2016年真题45题-14分】【第一步&#xff1a;信息提取】【第二步&#xff1a;具体解答】 【计算机组成原理2016年真题44题-9分】 假定CPU主频为5…

Docker项目部署

目录 一、前端项目部署 1、上传文件 2、开启容器 3、测试 二、后端项目部署 1、打包java项目 2、将jar包和Dockerfile文件长传到Linux系统 3、构建镜像 4、开启容器 5、测试 三、DockerCompose快速部署 基本语法 一、前端项目部署 1、上传文件 里面包括页面和配置文…

【c++设计模式之中介者模式】分析及示例

中介者模式属于行为型设计模式&#xff0c;旨在减少对象之间的耦合关系&#xff0c;通过引入一个中介者对象&#xff0c;将对象间复杂的交互转化为中介者与对象之间的简单交互&#xff0c;中介者模式实现了集中式控制&#xff0c;有助于系统的维护和扩展。 以下是一个使用中介…

秋招校招,什么是群面?

时间已经来到十月份&#xff0c;我们也迎来了秋季招聘的高峰期。一般来说&#xff0c;企业为了提高面试的速度&#xff0c;一般都会让我们进行群面。可是&#xff0c;很多人不懂得“群面”的意思&#xff0c;由此导致自己在面试环节丢分。今天&#xff0c;就跟着小编一起来了解…

【C++ techniques】虚化构造函数、虚化非成员函数

constructor的虚化 virtual function&#xff1a;完成“因类型而异”的行为&#xff1b;constructor&#xff1a;明确类型时构造函数&#xff1b;virtual constructor&#xff1a;视其获得的输入&#xff0c;可产生不同的类型对象。 //假如写一个软件&#xff0c;用来处理时事…

Spring Webflux DispatcherHandler源码整理

DispatcherHandler的构造(以RequestMappingHandlerMapping为例) WebFluxAutoConfiguration中EnableWebFluxConfiguration继承WebFluxConfigurationSupportBean public DispatcherHandler webHandler() {return new DispatcherHandler(); }DispatcherHandler#setApplicationCon…

移除元素(简单)

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个数组nums和一个值val&#xff0c;你需要"原地"移除所有数值等于val的元素&#xff0c;并返回移除后数组的新长度。不要使用额外的数组空间&#xff0c;你必须仅使用O(1)额外空间并"原地"修改输入数组。元…

【微服务的集成测试】python实现-附ChatGPT解析

1.题目 微服务的集成测试 知识点:深搜 时间限制: 1s 空间限制: 256MB 限定语言:不限 题目描述: 现在有n个容器服务,服务的启动可能有一定的依赖性 (有些服务启动没有依赖)其次服务自身启动加载会消耗一些时间。 给你一个 nxn 的二维矩阵 useTime,其中 useTime[i][i]=10 表示…

阿里云关系型数据库有哪些?RDS云数据库汇总

阿里云RDS关系型数据库大全&#xff0c;关系型数据库包括MySQL版、PolarDB、PostgreSQL、SQL Server和MariaDB等&#xff0c;NoSQL数据库如Redis、Tair、Lindorm和MongoDB&#xff0c;阿里云百科分享阿里云RDS关系型数据库大全&#xff1a; 目录 阿里云RDS关系型数据库大全 …

QT实现TCP服务器客户端的实现

ser&#xff1a; widget.cpp&#xff1a; #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//实例化一个服务器server new QTcpServer(this);// 此时&#xf…