webpack babel

构建工具

简介

  • 当我们习惯了在node中编写代码的方式后，在回到前端编写html、css、js这些东西会感觉到各种的不便。比如：不能放心的使用模块化规范（浏览器兼容性问题）、即使可以使用模块化规范也会面临模块过多时的加载问题。
  • 我们就迫切的希望有一款工具可以对代码进行打包，将多个模块打包成一个文件。这样一来即解决了兼容性问题，又解决了模块过多的问题。
  • 构建工具就起到这样一个作用，通过构建工具可以将使用ESM规范编写的代码转换为旧的JS语法，这样可以使得所有的浏览器都可以支持代码。

Webpack

概念

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。【按需打包】

webpack在node中运行

使用步骤

  1. 初始化项目yarn init -y
  2. 安装依赖webpack、webpack-cli
  3. 在项目中创建src目录，然后编写代码（默认主文件index.js）
  4. 执行yarn webpack来对代码进行打包（打包后观察dist目录）

cli: command line interface 命令行工具

安装依赖yarn add -D webpack webpack-cli, -d表示设置为开发依赖

src 目录下的是遵循前端开发规范的，src 以外的要用node规范CommonJS

配置文件（webpack.config.js）

const path = require("path")
module.exports = {mode: "production", entry: "./src/index.js",output: {}, module: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"]}]}
}

书写对象的时候，可以在最后一个属性值后面加上,并且属性名可以不为字符串

但在写JSON的时候，属性名也需要加上“”并且最后不能加上,

mode

告知 webpack 使用相应模式的内置优化

  • none：不使用任何默认优化选项
  • production：生产模式
  • development：开发模式
entry

默认值是 ./src/index.js（一般不改，约定优于配置）

  • 单个入口语法【最常见】 entry: string | [string]
  • 多个传数组 entry: ['./src/file_1.js', './src/file_2.js']
  • 对象写法分别命名打包 entry: {app: './src/app.js',adminApp: './src/adminApp.js',},
output

默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中

  • filename: "bundle.js" 设置打包后的文件名

    多个入口 entry 的情况 filename: [name]-[id]-[hash].js

    使用 占位符(substitutions) 来确保每个文件具有唯一的名称（很少用）

  • clean: true 自动清理打包目录（path指定的目录），只保留当前这次打包的文件

  • path: "" 指定打包目录，必须要绝对路径

    一般会使用Node.js中的path模块来操作文件路径

    const path = require('path');	//引入path模块
path.resolve(__dirname, "dist")	//表示当前目录下的dist文件夹
loader

loader 让 webpack 能够去处理其他类型的文件（默认只能处理js文件），并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

使用步骤：

  1. 安装对应的 loader：yarn add css-loader style-loader ts-loader -D

  2. 配置方式（推荐）：

    • test 属性：识别出哪些文件需要被转换（使用正则表达式/\.css$/i）
    • use 属性：定义出在进行转换时，使用哪个 loader（字符串、数组、对象）
    • type 属性：加载图像资源，设置为"asset/resource"
    • exclude 属性：不需要转换的文件夹（正则表达式）
    module.exports = {module: {	// 易漏点rules: [ { test: /\.css$/, use: ['style-loader','css-loader'] },{ test: /\.ts$/, use: 'ts-loader' },{ test:/\.(jpg|png|gif)$/i,type:"asset/resource" },],},
};

    css-loader 只负责打包，style-loader 负责渲染生效【单一职责原则】

    loader 执行顺序为从后向前执行，因此 use 的数组顺序不能调换

  3. *内联方式：在每个 import 语句中显式指定 loader。

    使用 ! 将资源中的 loader 分开。每个部分都会相对于当前目录解析。

    import Styles from 'style-loader!css-loader?modules!./styles.css';
    • 使用!前缀，将禁用所有已配置的 normal loader(普通 loader)
    • 使用!!前缀，将禁用所有已配置的 loader（preLoader, loader, postLoader）
    • 使用-!前缀，将禁用所有已配置的 preLoader 和 loader，但是不禁用 postLoaders

    选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}。

    尽可能使用 module.rules，因为这样可以减少源码中样板文件的代码量，并且可以在出错时，更快地调试和定位 loader 中的问题。

babel
概念

  • 在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。

  • 但是我们现在希望能够使用新的特性，我们可以采用折中的方案。依然使用新特性编写代码，但是代码编写完成时我们可以通过一些工具将新代码转换为旧代码。

  • babel就是这样一个工具，可以将新的js语法转换为旧的js，以提高代码的兼容性。

  • 如果希望在webpack支持babel，则需要向webpack中引入babel的loader

    是 loader 中的一种

使用步骤

  1. 安装 npm install -D babel-loader @babel/core @babel/preset-env

    • babel-loader：连接webpack和babel的中间件
    • @babel/core：babel的转换核心
    • @babel/preset-env：预设环境

  2. 配置：

    module: {rules: [{test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}]
}

  3. 在package.json中设置兼容列表

    "browserslist": ["defaults"]

    配置参考：https://github.com/browserslist/browserslist

plugin
概念
  • 插件用来为webpack来扩展功能
  • 插件目的在于解决 loader 无法实现的其他事。
  • Webpack 提供很多开箱即用的 插件。
常用插件

html-webpack-plugin

  • 这个插件可以在打包代码后，自动在打包目录生成html页面

使用步骤：

  1. 安装依赖yarn add -D html-webpack-plugin
  2. 引入依赖const HTMLPlugin = require("html-webpack-plugin")
  3. 配置插件
plugins: [new HTMLPlugin({// title: "Hello Webpack",	//设置titletemplate: "./src/index.html"	//模板，自动引入script脚本})]
devtool

devtool:"inline-source-map"配置源码的映射，方便调试打包后的代码。

开发服务器（webpack-dev-server）

  • 安装：yarn add -D webpack-dev-server
  • 启动：yarn webpack serve --open（--open表示启动服务器后自动打开）

配置 webpack –watch 执行，（在本地文件夹中访问）代码发生变化时自动更新打包。

在这里插入图片描述

grunt/glup的对比

Vite

概念

  • Vite也是前端的构建工具

  • 相较于webpack，Vite采用了不同的运行方式：

    • 开发时，并不对代码打包，而是直接采用**ESM（ES模块）**的方式来运行项目
    • 在项目部署时，再对项目进行打包

  • 除了速度外，Vite使用起来也更加方便（开箱即用，都配置好了）

  • 本质上 Vite 和 Webpack 是打包工具，只是 Webpack 比较底层，需要自己手动去配置。

    ESM 必须通过 url 加载页面（即需要通过服务器运行）

基本使用

  1. 安装开发依赖 Vite yarn add -D vite

  2. Vite 的源码目录默认就是项目**根目录**

    • 在页面中引入 js 文件的时候要指定 type=“module”
    • 修改路径直接在 script 标签中修改 src 属性正确即可（webpack需要配置）

  3. 开发命令：

    • vite 启动开发服务器

    • vite build 打包代码

    • vite preview 预览打包后代码

  4. 使用命令构建项目：

npm create vite@latest	#使用 NPM
yarn create vite	#使用 Yarn
pnpm create vite	#使用 PNPM
#Vanilla 表示原生JS开发项目

  1. 使用插件

    1. 安装插件：npm add -D @vitejs/plugin-legacy

      @vitejs/plugin-legacy：兼容传统浏览器的语法转换插件

    2. 配置文件：vite.config.js

      // vite.config.js
import legacy from '@vitejs/plugin-legacy'	//引入插件
import { defineConfig } from 'vite'	//语法提示（可选）
export default defineConfig({	//写上defineConfig配置时会有提示plugins: [	//配置插件legacy({targets: ['defaults', 'IE 11'],	//配置兼容版本}),],
})

      需要使用ES6的模块化（export default）去暴露文件（区别于 webpack 使用require）

学习自李立超老师

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

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

相关文章

S7-1200PLC和SMART PLC开放式以太网通信(UDP双向通信)

S7-1200PLC和SMART PLC开放式以太网通信(UDP双向通信)

S7-1200PLC的以太网通信UDP通信相关介绍还可以参考下面文章链接： 博途PLC开放式以太网通信TRCV_C指令应用编程(运动传感器UDP通信)-CSDN博客文章浏览阅读2.8k次。博途PLC开放式以太网通信TSENG_C指令应用，请参看下面的文章链接：博途PLC 1200/1500PLC开放式以太网通信TSEND_…
阅读更多...
图书销售数据大屏可视化【可视化项目案例-03】

图书销售数据大屏可视化【可视化项目案例-03】

🎉🎊🎉 你的技术旅程将在这里启航！ 🚀🚀 本文选自专栏：可视化技术专栏100例 可视化技术专栏100例，包括但不限于大屏可视化、图表可视化等等。订阅专栏用户在文章底部可下载对应案例源码以供大家深入的学习研究。 🎓 每一个案例都会提供完整代码和详细的讲解，不…
阅读更多...
k8s 裸金属集群部署metalLB软负载均衡 —— 筑梦之路

k8s 裸金属集群部署metalLB软负载均衡 —— 筑梦之路

metalLB 官方网站 Repo：https://github.com/metallb/metallb 官网：https://metallb.universe.tf/installation metalLB解决什么问题？ MetalLB 是一个用于裸机 Kubernetes 集群的负载均衡器实现，使用标准路由协议。 k8s 并没有为裸…
阅读更多...
【m98】webrtc vs2017构建带符号的debug库

【m98】webrtc vs2017构建带符号的debug库

调试有符号 调试 无符号 试试exe不输出到独立的文件？ -】 直接输出到sln下面
阅读更多...
（2023|CVPR，扩散，主体标识符，先验保存损失）DreamBooth：微调文本到图像的扩散模型以实现主题驱动的生成

（2023|CVPR，扩散，主体标识符，先验保存损失）DreamBooth：微调文本到图像的扩散模型以实现主题驱动的生成

DreamBooth: Fine Tuning Text-to-Image Diffusion Models for Subject-Driven Generation 公众号：EDPJ（添加 VX：CV_EDPJ 或直接进 Q 交流群：922230617 获取资料） 目录 0. 摘要 1. 简介 2. 相关工作 3. 方法 3.…
阅读更多...
C语言--从键盘输入当月利润I,求应发奖金总数。

C语言--从键盘输入当月利润I,求应发奖金总数。

题目描述： 企业发放的奖金根据利润提成。利润I低于或等于100000元的，奖金可提成10%; 利润高于100000 元，低于200000元(1000001000000时，超过1000000元的部分按 1%提成。从键盘输入当月利润I,求应发奖金总数。 int main() {int m…
阅读更多...
使用MybatisPlus时出现的java.lang.NullPointerException异常~

使用MybatisPlus时出现的java.lang.NullPointerException异常~

错误描述如下所示： 错误原因：Junit的导包错误 单元测试的包有如下所示两个 我们应该根据springboot的版本进行选择， 在Spring Boot 2.2.X以后使用import org.junit.jupiter.api.Test Junit5 在Spring Boot 2.2.x之前使用import org.junit.T…
阅读更多...
junit写搜索树测试

junit写搜索树测试

用法 assertTrue(range.contains("Two")); 2个参数,右边错就打印左边. AbstractSelfBalancingBinarySearchTree abt; AbstractBinarySearchTree.Node node; Before public void setUp() { abt new AbstractSelfBalancingBinarySearchTree() { Override protecte…
阅读更多...
javaEE案例,前后端交互,计算机和用户登录

javaEE案例,前后端交互,计算机和用户登录

加法计算机,前端的代码如下 : 浏览器访问的效果如图 : 后端的代码如下 再在浏览器进行输入点击相加,就能获得结果 开发中程序报错,如何定位问题 1.先定位前端还是后端(通过日志分析) 1)前端 : F12 看控制台 2)后端 : 接口,控制台日志 举个例子: 如果出现了错误,我们就在后端…
阅读更多...
【h5 uniapp】 滚动 滚动条，数据跟着变化

【h5 uniapp】 滚动 滚动条，数据跟着变化

uniapp项目 需求： 向下滑动时，数据增加，上方的日历标题日期也跟着变化 向上滑动时，上方的日历标题日期跟着变化 实现思路： 初次加载目前月份的数据 以及下个月的数据 this.getdate()触底加载 下个月份的数据 onReach…
阅读更多...
Panda3d 场景管理

Panda3d 场景管理

Panda3d 场景管理 文章目录 Panda3d 场景管理有关分层场景图的重要信息NodePathNodePath 以及 Node 的函数调用模型文件文件格式加载模型文件将模型放置在场景图中模型缓存压缩模型异步加载模型通过回调函数进行 常见的状态变化修改节点的位置和姿态改变父级节点改变颜色隐藏和…
阅读更多...
如何帮助 3D CAD 设计师实现远程办公

如何帮助 3D CAD 设计师实现远程办公

当 3D CAD 设计师需要远程办公时，他们可能需要更强的远程软件，以满足他们的专业需求。比如高清画质，以及支持设备重定向、多显示器支持等功能。3D CAD 设计师如何实现远程办公？接下来我们跟随 Platinum Tank Group 的故事来了解一…
阅读更多...
JS实现数据结构与算法

JS实现数据结构与算法

队列 1、普通队列 利用数组push和shif 就可以简单实现 2、利用链表的方式实现队列 class MyQueue {constructor(){this.head nullthis.tail nullthis.length 0}add(value){let node {value}if(this.length 0){this.head nodethis.tail node}else{this.tail.next no…
阅读更多...
drawio连接线的样式设置

drawio连接线的样式设置

drawio是一款强大的图表绘制软件，支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用，则直接输入网址draw.io或者使用drawon(桌案), drawon.cn内部完整的集成了drawio的所有功能，并实现了云端存储，以及在线共…
阅读更多...
DDoS攻击剧增，深入解析抗DDoS防护方案

DDoS攻击剧增，深入解析抗DDoS防护方案

当下DDoS攻击规模不断突破上限，攻击方式越发复杂。面对复杂的攻击形式，对于企业和组织来说无疑需要更完备的抗DDoS方案，依靠传统的解决方法并不能做到一劳永逸。在服务器抵抗DDoS防护上，你不会忽略F5的产品，让我们一起…
阅读更多...
【LLM_03】自然语言处理基础_1

【LLM_03】自然语言处理基础_1

一、自然语言处理基基本任务和应用1、自然语言处理的基本任务2、搜索引擎的基本工作原理3、知识图谱的构建4、应用 二、词表示与语言模型1、词表示2、上下文3、语言模型4、神经网络在语言模型的应用 三、神经网络1、神经网络基本组成元素2、如何训练神经网络3、计算图的概念4、…
阅读更多...
npm 下载包失败解决方案

npm 下载包失败解决方案

1.【问题描述】使用 npm 下载vue项目依赖包时失败，版本不一致。 【解决方法】使用 npm install --force npm install --force 是一个命令行指令，用于在 Node.js 环境中使用 npm（Node Package Manager）安装包或模块。–force 参数表…
阅读更多...
2023 年最好的 Android 系统修复/刷机应用程序和软件

2023 年最好的 Android 系统修复/刷机应用程序和软件

任何 Android 设备要顺利运行，其操作系统必须运行良好。幸运的是，对于大多数 Android 用户来说，这是不间断的。设备运行良好，打电话、共享文档等都没有问题。尽管如此，Android 操作系统可能会停止运行。这可能是由于特…
阅读更多...
Pinme POS无代码开发集成营销系统，实现广告推广自动化

Pinme POS无代码开发集成营销系统，实现广告推广自动化

无代码开发平台的优势 无代码开发平台如集简云是一款超级软件连接器，无需开发，无需代码知识就可以轻松打通千款软件之间的数据连接，构建自动化与智能化的业务流程。这种方式无需花费数周甚至数个月的时间做软件集成开发，最快20分…
阅读更多...
海康Visionmaster-环境配置：CSharp 二次开发环境配 置方法

海康Visionmaster-环境配置：CSharp 二次开发环境配 置方法

C#二次开发环境的配置方法 以 WinForm 为例，进行 VM 二次开发的环境配置分为三步： 第一步，使用 VS 新建一个框架为.NET Framework 4.6.1 的工程，平台首选 32 位取消勾选，重新生成解决方案，保证工程 Debug 下…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023