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

news2024/11/26 7:44:39

一、什么是 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.coloradmin.cn/o/1053369.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

揭秘：机构招生电子传单制作的五个黄金法则

揭秘：机构招生电子传单制作的五个黄金法则

机构招生微传单制作一直都是让很多人在意的事情。一款好的微传单不仅可以吸引更多的学生&#xff0c;还可以省去很多招生工作的时间和精力。但是&#xff0c;很多人却不知道如何制作一款精美的微传单。下面就让我们来学习一下如何制作一款机构招生的微传单吧。 首先&#xff0c…
阅读更多...
聊聊Go与依赖注入

聊聊Go与依赖注入

如果你读过Robert C. Martin[1]的《敏捷软件开发&#xff1a;原则、模式与实践》[2](书的封皮见下图)&#xff0c;那么你一定知道经典的SOLID设计原则[3]中的“D”&#xff1a;依赖倒置原则&#xff08;Dependency Inversion Principle, DIP&#xff09;。 依赖倒置原则是面向对…
阅读更多...
node版本问题：Error: error:0308010C:digital envelope routines::unsupported

node版本问题：Error: error:0308010C:digital envelope routines::unsupported

前言 出现这个错误是因为 node.js V17及以后版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制&#xff0c;可能会对生态系统造成一些影响. 在node.js V17以前一些可以正常运行的的应用程序,但是在 V17 及以后版本可能会抛出以下异常: 我重装系…
阅读更多...
华为云云耀云服务器L实例评测｜部署在线图表和流程图绘制工具drawio

华为云云耀云服务器L实例评测｜部署在线图表和流程图绘制工具drawio

华为云云耀云服务器L实例评测&#xff5c;部署在线图表和流程图绘制工具drawio 一、云耀云服务器L实例介绍1.1 云服务器介绍1.2 优势及其应用场景1.3 支持镜像 二、云耀云服务器L实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 drawio3.1 drawio 介绍3.2 Docker 环…
阅读更多...
宝贝详情页制作的7个步骤，一看就懂

宝贝详情页制作的7个步骤，一看就懂

对于许多淘宝卖家来说&#xff0c;制作精美的详情页是吸引客户和提升销售的关键。然而&#xff0c;很多卖家可能会因为缺乏设计技能和经验而感到困惑。本文将为您揭示如何使用免费在线海报制作工具&#xff0c;如乔拓云&#xff0c;来制作具有吸引力的详情页&#xff0c;让您在…
阅读更多...
基本数据类型在内存中存储形式

基本数据类型在内存中存储形式

目录 内存分区模型 常量 与 变量 常量的定义 #define 与 const 区别 宏与const使用 修改const常量 整数类型 无符号整数 有符号整数 补码 内存分析 浮点数类型 float类型的IEEE编码 double类型的IEEE编码 基本的浮点数指令 数据类型转换分析 浮点数作为返回值…
阅读更多...
嵌入式Linux应用开发-基础知识-第十六章GPIO和Pinctrl子系统的使用

嵌入式Linux应用开发-基础知识-第十六章GPIO和Pinctrl子系统的使用

嵌入式Linux应用开发-基础知识-第十六章GPIO和Pinctrl子系统的使用 第十六章 GPIO 和 Pinctrl 子系统的使用16.1 Pinctrl 子系统重要概念16.1.1 引入16.1.2 重要概念16.1.3 示例16.1.4 代码中怎么引用pinctrl 16.2 GPIO子系统重要概念16.2.1 引入16.2.2 在设备树中指定引脚16.2…
阅读更多...
React 入门笔记

React 入门笔记

前言 国庆值班把假期拆了个稀碎, 正好不用去看人潮人海, 趁机会赶个晚集入门一下都火这么久的 React 前端技术. 话说其实 n 年前也了解过一丢丢来着, 当时看到一上来就用 JS 写 DOM 的套路直接就给吓退了, 扭头还去看 Vue 了&#x1f923;, 现在从市场份额来看, 确实 React 还…
阅读更多...
分析各种表达式求值过程

分析各种表达式求值过程

目录 算术运算与赋值 编译器常用的两种优化方案 常量传播 常量折叠 加法 Debug编译选项组下编译后的汇编代码分析 Release开启02执行效率优先 减法 Release版下优化和加法一致&#xff0c;不再赘述 乘法 除法 算术结果溢出 自增和自减 关系运算与逻辑运算 JCC指…
阅读更多...
决胜未来：解锁新科技趋势的无尽可能性

决胜未来：解锁新科技趋势的无尽可能性

随着科技的飞速发展,我们的未来迈入一个新的时代。无论是人工智能、区块链、大数据、物联网还是机器学习等,这些技术正以前所未有的速度重塑我们的世界和生活。面对这些未来的科技趋势,我们能否抓住其中的机遇并寻找新的突破? 首先&#xff0c;我们来看一看人工智能。人工智能…
阅读更多...
2023年中国工业脱水机行业供需分析：随着自动化和智能化技术的快速发展，销量同比增长4.9%[图]

2023年中国工业脱水机行业供需分析：随着自动化和智能化技术的快速发展，销量同比增长4.9%[图]

工业脱水机行业是指专门从湿润的固体物料中去除水分的设备制造和相关服务。它广泛应用于食品加工、化工、制药、纺织、环保等行业&#xff0c;用于去除物料中的水分&#xff0c;提高产品质量和降低能耗。 工业脱水机行业分类 资料来源&#xff1a;共研产业咨询&#xff08;共研…
阅读更多...
基于SpringBoot的师生共评的作业管理系统设计与实现

基于SpringBoot的师生共评的作业管理系统设计与实现

目录 前言 一、技术栈 二、系统功能介绍 课程管理 作业管理 作业互评 小组管理 作业管理 作业评分 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网信息的飞速发展&#xff0c;无纸化作业变成了一种趋势&#xff0c;针对这个问题开发一个…
阅读更多...
【Window10 】删除‘设备和驱动器’中的百度网盘、酷狗音乐、迅雷下载等

【Window10 】删除‘设备和驱动器’中的百度网盘、酷狗音乐、迅雷下载等

原因&#xff1a; 不想在设备里看到它。 解决方案&#xff1a; 打开cmd找到 HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\MyComputer\NameSpace\ 目录在 NameSpace 目录下找到对应的软件目录&#xff0c;删除即可&#xff08;挨个目录的点击进去看…
阅读更多...
Java / MybatisPlus：JSON处理器的应用，在实体对象中设置对象属性，对象嵌套对象

Java / MybatisPlus：JSON处理器的应用，在实体对象中设置对象属性，对象嵌套对象

1、数据库设计 2、定义内部的实体类 /*** Author lgz* Description* Date 2023/9/30.*/ Data // 静态构造staticName&#xff0c;方便构造对象并赋予属性 AllArgsConstructor(staticName "of") NoArgsConstructor ApiModel(value "亲友", description …
阅读更多...
web：[极客大挑战 2019]PHP

web：[极客大挑战 2019]PHP

题目 点进页面显示如下 根据页面提示&#xff0c;这个网站有备份文件&#xff0c;备份文件一般是bak文件格式&#xff0c;用dirsearch扫描 访问之后下载了一个文件 里面都是一些代码 在index.php中发现了一个类的文件&#xff0c;一个get传参&#xff0c;然后将传进的值进行反序…
阅读更多...
【强化学习】基础概念

【强化学习】基础概念

1. Agent (智能体) 智能体是进行决策和学习的实体&#xff0c;它能感知环境的状态&#xff0c;并基于策略采取动作以影响环境。智能体的目标是通过与环境的交互获得最大化的累积奖励。 2. Environment (环境) 环境是智能体所处的外部系统&#xff0c;它与智能体交互。环境的…
阅读更多...
Error: node: unknown or unsupported macOS version: :dunno 错误解决

Error: node: unknown or unsupported macOS version: :dunno 错误解决

一、原因 今天安装 brew install node报错了&#xff0c;错误信息如下&#xff1a; 二、解决方案 1&#xff09;查找homebrew-cask安装位置 echo $(brew --repo homebrew/homebrew-cask) // 输出 /opt/homebrew/Library/Taps/homebrew/homebrew-cask2&#xff09;使用 gi…
阅读更多...
Linux系统编程系列之进程间通信-IPC对象

Linux系统编程系列之进程间通信-IPC对象

一、什么是IPC对象 消息队列&#xff0c;共享内存和信号量组被称为IPC对象。各种不同的IPC其实是在不同时期逐步引入的&#xff0c;他们是在UNIX伯克利版本system-V中引入的三种通信方式。 二、IPC对象特性 1、在系统中使用键值&#xff08;KEY&#xff09;来唯一确定&#xf…
阅读更多...
angular 在vscode 下的hello world

angular 在vscode 下的hello world

Angulai 是google 公司开发的前端开发框架。Angular 使用 typescript 作为编程语言。typescript 是Javascript 的一个超集&#xff0c;提升了某些功能。本文介绍运行我的第一个angular 程序。 前面部分参考&#xff1a; Angular TypeScript Tutorial in Visual Studio Code 一…
阅读更多...
yolov8 opencv模型部署（C++版）

yolov8 opencv模型部署（C++版）

yolov8 opencv模型部署&#xff08;C 版&#xff09; 使用opencv推理yolov8模型&#xff0c;仅依赖opencv&#xff0c;无需其他库&#xff0c;以yolov8s为例子&#xff0c;注意&#xff1a; 使用opencv4.8.0 &#xff01;使用opencv4.8.0 &#xff01;使用opencv4.8.0 &#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023