构建工具vite/webpack

一、vite

快速开始

  1. 全局安装vite npm i -g vite
  2. 创建vite npm create vite
  3. 安装依赖 npm i
  4. 运行项目 npm run dev

二、webpack

1、使用步骤

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

cli: command line interface 命令行工具

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

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

2、配置文件(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"配置源码的映射,方便调试打包后的代码。

3、开发服务器(webpack-dev-server)

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

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

4、grunt/glup的对比

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

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

相关文章

Linux常用工具

文章目录 前言一、Linux编辑器-vim使用1.vim的基本概念2. vim的基本操作3. vim命令集1. 正常模式1. 模式切换和光标移动2. 删除文字及复制3. 其他操作 2. 底行模式 二、Linux编译器-gcc/g使用1. 命令和选项2. 预处理3. 编译4. 汇编(生成机器可识别代码)5. 连接(生成可执行文件或…

Docker 部署 MongoDB 服务

拉取最新版本的 MongoDB 镜像: $ sudo docker pull mongo:latest在本地预先创建好 db 和 configdb 目录, 用于映射 MongoDB 容器内的 /data/db 和 /data/configdb 目录。 使用以下命令来运行 MongoDB 容器: $ sudo docker run -itd --name mongo --privilegedtru…

C#webform Static DataTable 多人同时操作网页数据重复问题

在C# Web Forms中,如果声明一个static变量,它将在整个应用程序域(Application Domain)中保持持久化状态。每个用户的请求都在同一个应用程序域中处理,因此static变量在不同页面间保持相同的值。 当一个用户发起请求时…

LCP 02.分式化简

​​题目来源: leetcode题目,网址:110. 平衡二叉树 - 力扣(LeetCode) 解题思路: 模拟分式计算过程即可。 解题代码: class Solution {public int[] fraction(int[] cont) {if(cont.length1){…

JPEG算法及例程

JPEG(Joint Photographic Experts Group)是一种常见的图像压缩算法,用于减小图像文件的大小。它是一种有损压缩算法,即通过牺牲一定的图像质量来实现压缩。 以下是一个简单的JPEG压缩算法的例程: 将输入图像转换为YUV…

抖音seo矩阵系统源代码分享

技术开发注意事项: 确定业务需求:在开发前,需要明确抖音矩阵系统的业务需求,了解用户的需求和使用习惯,明确系统的功能、性能和安全需求。 选择合适的技术方案:根据系统的需求和复杂度,选择合适…

ibevent 定制——libevent 定制内存分配

libevent 定制内存分配 默认情况下,libevent 使用 C 库的内存管理函数在堆上分配内存。通过提供 malloc、realloc和 free 的替代函数,可以让 libevent 使用其他的内存管理器。希望 libevent 使用一个更高效的分配器时;或者希望 libevent 使用一个工具分配器,以便检查内存泄漏时…

有多条业务线,mysql建多库多表比较好还是一个库多个表比较好呢?

选择使用多库多表还是一个库多个表,取决于你的具体情况和需求。以下是一些考虑因素: 数据隔离:如果每条业务线需要完全独立的数据隔离,例如不同业务线的数据不会相互关联或共享,那么使用多库可以更好地实现数据隔离。 …

JavaWeb 学习笔记 3:Servlet

JavaWeb 学习笔记 3:Servlet 1.简介 Servlet 是 JavaEE 定义的一套 Web 应用开发标准(接口),实现了该技术的 Web 服务器软件(如 Tomcat)上可以运行一个 Servlet 容器,只要我们使用 Servlet 技…

Python 移动文件到指定路径

需求:将指定的文件从指定目录移动到用户指定的目标目录。 shutil 是 Python 标准库中的一个模块,它提供了许多文件和文件集合的高级操作。基本上,它可以帮助我们执行文件操作,例如复制、移动、更名和删除。它旨在与 os 模块一起使…

【测试开发】基础篇 · 专业术语 · 软件测试生命周期 · bug的描述 · bug的级别 · bug的生命周期 · 处理争执

【测试开发】基础篇 文章目录 【测试开发】基础篇1. 软件测试生命周期1.1 软件生命周期1.2 软件测试生命周期 2. 描述bug3. 如何定义bug的级别3.1 为什么要对bug进行级别划分3.2 bug的一些常见级别 4. bug的生命周期5. 产生争执这么怎么办(处理人际关系)…

ChatGPT:URL编码问题——如何正确进行URL编码以处理特殊字符

ChatGPT:URL编码问题——如何正确进行URL编码以处理特殊字符 报错: URISyntaxException: Malformed escape pair at index 192: http://Center/Question/questionList.html?seaKey%E6%8D%AE%E7%BB%9F%E8%AE%A1%EF%BC%8C%E5%9B%A0%E7%81%AB%E7%81%BE%E6%…

服务器数据恢复-LINUX操作系统下各文件系统误删除/格式化数据的恢复方案

服务器数据恢复环境: 基于EXT2/EXT3/EXT4/Reiserfs/Xfs文件系统的Linux操作系统。 服务器故障: LINUX操作系统下误删除/格式化数据。 服务器数据恢复过程: 1、首先会检测服务器是否存在硬件故障,如果检测出硬件故障,交…

Linux之jar包之启动与停止脚本

Linux之jar包之启动与停止脚本 一、使用说明二、脚本代码 一、使用说明 启动 ./service.sh start关闭 ./service.sh stop二、脚本代码 #!/bin/bash #这里可替换为你自己的执行程序,其他代码无需更改 APP_NAMEmxy_system-0.0.1-SNAPSHOT.jar # shellcheck disabl…

9.18算法

机器人重物1126 注意编号是方块的,而不是格点的 及如果为n*m的矩阵,需要开(n1)*(m1)的矩阵 //如果没有转向,就是走迷宫,结合记忆化,如果这个点之前走过就不走了 //又转向的话,就用一个变量记录当前转向&…

量化分析革新金融服务软件的三种方式

金融服务软件行业爱死量化分析了。 为什么呢?因为在这个本质上不可预测的行业中,量化分析提供了一种确定性,或者至少是类似于确定性的东西。 市场总是在变动,利润也起伏不定。交易达成了,然后落空,又再次…

Golang Linux 安装与环境变量配置

下载 Go 二进制包 wget https://dl.google.com/go/go1.21.1.linux-amd64.tar.gz 解压文件并将其移至 /usr/local 目录 sudo tar -C /usr/local -xzf go1.20.1.linux-amd64.tar.gz -C 选项解压文件到 /usr/local 目录,查看 /usr/local/go 目录的内容 将 Go 二进…

19 视图定义 union 是根据第一个 select 字段列表顺序,来进行 merge 的

前言 这个问题主要是 在之前存在这样的一个问题, 在生产环境上面 按照 我的直观理解, mysql 应该是根据 key 进行 merge, 所以 select 的顺序应该是 “不重要”??, 但是 结果我理解错了 然后 线上的查询也出现了问题, 发现很奇怪的问题, 明明 key01 列 是 id, 但是有一部…

深度学习——线性神经网络一

深度学习——线性神经网络一 文章目录 前言一、线性回归1.1. 线性回归的基本元素1.1.1. 线性模型1.1.2. 损失函数1.1.3. 解析解1.1.4. 随机梯度下降1.1.5. 用模型进行预测 1.2. 向量化加速1.3. 正态分布与平方损失1.4. 从线性回归到深度网络 二、线性回归的从零开始实现2.1. 生…

Java面试题整理(带答案)

目录 TCP和UDP的区别 get和post的区别 Cookie和session的区别 Java的基本类型有哪些? 抽象类和接口区别? 对于堆栈的理解 和equals区别 如何理解Java多态? 创建线程都有哪些方式 脏读、不可重复度、幻读都是什么? Jav…