webpack和vite

news2024/9/23 3:27:01

构建工具

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",	//设置title
            template: "./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 执行，（在本地文件夹中访问）代码发生变化时自动更新打包。

image-20230222152155721

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.coloradmin.cn/o/1932644.html

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

相关文章

【单片机毕业设计选题24069】-物联网节水灌溉系统设计

【单片机毕业设计选题24069】-物联网节水灌溉系统设计

系统功能: 完成基于物联网的节水灌溉系统的电路图以及软件代码编写。要求系统可以通过传感器监测土壤的湿度和环境温湿度，如果土壤湿度低于限值和环境温湿度超过限值，则需开启继电器，打开电机水泵进行供水灌溉；当土壤湿度高于限值…
阅读更多...
有关电力电子技术的一些相关仿真和分析：⑦三相桥式电压型PWM逆变器与直接/间接法控制单相全桥结构PWM整流器（MATLAB/Siumlink仿真）

有关电力电子技术的一些相关仿真和分析：⑦三相桥式电压型PWM逆变器与直接/间接法控制单相全桥结构PWM整流器（MATLAB/Siumlink仿真）

1.1 题目一要求 以三相桥式电压型PWM逆变器为对象，研究其在不同调制度下，输出电压的频谱成分变化，依据仿真波形分析其工作时序。 参数要求：三相桥式逆变电路，直流侧电压800V，调制波频率50HZ，开关频率10kHZ，阻感负载R=10Ω，L=5mH。 1.2 题目二要求 以单相全桥结构P…
阅读更多...
泛域名ssl生成

泛域名ssl生成

ssl生成 参考文档 https://github.com/acmesh-official/acme.sh/wiki/%E8%AF%B4%E6%98%8E安装acme curl https://get.acme.sh | sh -s email[此处放githup的邮箱]例：curl https://get.acme.sh | sh -s emailmyexample.com手动 dns 方式 // 1.触发验证&#xf…
阅读更多...
llama-index,uncharted and llama2:7b run locally to generate Index

llama-index,uncharted and llama2:7b run locally to generate Index

题意：本地运行 llama-index、uncharted 以及 llama2:7b 来生成索引 问题背景： I wanted to use llama-index locally with ollama and llama3:8b to index utf-8 json file. I dont have a gpu. I use uncharted to convert docs into json. Now If it …
阅读更多...
MongoDB自学笔记（三）

MongoDB自学笔记（三）

一、前文回顾 上一篇文章中我们学习了更新操作&#xff0c;以及讲解了部分的更新操作符&#xff0c;今天我们继续学习剩余的更新操作符。 二、更新操作符 1、$rename 语法&#xff1a;{ $rename: { < field1 >: < newName1 >, < field2 >: < newName2…
阅读更多...
【python】多种回归算法对比气温预测

【python】多种回归算法对比气温预测

目录 引言 决策树回归&#xff08;Decision Tree Regression&#xff09; 线性回归&#xff08;Linear Regression&#xff09; 随机森林回归&#xff08;Random Forest Regression&#xff09; 气温预测对比实例 数据集 预测值与实际值对比图 模型评价指标 代码实现 …
阅读更多...
【Neural signal processing and analysis zero to hero】- 2

【Neural signal processing and analysis zero to hero】- 2

Nonstationarities and effects of the FT course from youtube: 传送地址 why we need extinguish stationary and non-stationary signal, because most of neural signal is non-stationary. Welch’s method for smooth spectral decomposition Full FFT method y…
阅读更多...
vim网络和安全的操作及shell的使用

vim网络和安全的操作及shell的使用

目录 vim模式 一般模式下的基本操作&#xff1a; 一般模式切换到编辑模式&#xff1a; 一般模式切换到命令模式&#xff1a; Vim多窗口使用技巧 横向切割打开&#xff1a; 纵向切割打开&#xff1a; 关闭多窗口&#xff1a; 窗口的切换&#xff1a; 网络&#xff1a;…
阅读更多...
django学习入门系列之第四点《BootStrap依赖》

django学习入门系列之第四点《BootStrap依赖》

文章目录 往期回顾 BootStrap依赖于JavaScript的类库&#xff0c;JQuery下载 下载JQuery&#xff0c;在界面上应用JQuery 在页面上应用BootStrap和avaScript的类库【JQuery是avaScript的类库】 JQuery的官网&#xff1a; jQuery 如果要应用JQuery 则要在body里面导入文件…
阅读更多...
信息安全CISSP认证重点学什么？学习后能掌握哪些安全技能？

信息安全CISSP认证重点学什么？学习后能掌握哪些安全技能？

引言&#xff1a; 想要在信息安全领域取得突破&#xff1f;那么CISSP认证是您必不可少的一步&#xff01;本文将为您介绍CISSP认证的重点学习内容以及学习后可以掌握的安全技能&#xff0c;助您更好地了解并准备这一全球认可的信息安全证书。 随着信息安全领域的不断发展&…
阅读更多...
uniapp小程序上传pdf文件

uniapp小程序上传pdf文件

<template><view class"mainInnBox"><view class"formBox"><!-- 注意&#xff0c;如果需要兼容微信小程序&#xff0c;最好通过setRules方法设置rules规则 --><u-form :model"form" ref"uForm" :rules&quo…
阅读更多...
抖音seo短视频账号矩阵系统源码-SaaS开源部署流程开发者技术分享

抖音seo短视频账号矩阵系统源码-SaaS开源部署流程开发者技术分享

抖音seo账号矩阵系统&#xff0c;短视频矩阵系统源码&#xff0c; 短视频矩阵是一种常见的视频编码标准&#xff0c;通过多账号一键授权管理的方式&#xff0c;为运营人员打造功能强大及全面的“矩阵式“管理平台。使用矩阵系统也能保证账号的稳定性&#xff0c;降低账号的风险…
阅读更多...
数据结构之双向链表(赋源码)

数据结构之双向链表(赋源码)

数据结构之双向链表(源码) 线性表 双向链表是线性表链式存储结构的一种&#xff0c;若对链式存储结构进行分类可以分为八种。 带头、不带头&#xff1a;指的是该连链表有无头节点&#xff0c;头节点不存放任何内容&#xff0c;它不一定是链表必备的元素&#xff0c;而一个链…
阅读更多...
ros2--launch

ros2--launch

是什么 ros2的多节点启动工具。 作用 通过launch工具执行launch文件&#xff0c;可以启动launch文件中配置的多个节点&#xff0c;以及这些启动的节点配置数据。 launch文件的实现 ROS2的launch文件有三种格式&#xff0c;python、xml、yaml。 链接 python语言创建launch文…
阅读更多...
Elasticsearch 批量更新

Elasticsearch 批量更新

Elasticsearch 批量更新 准备条件查询数据批量更新 准备条件 以下查询操作都基于索引crm_flow_info来操作&#xff0c;索引已经建过了&#xff0c;本文主要讲Elasticsearch批量更新指定字段语句&#xff0c;下面开始写更新语句执行更新啦&#xff01; 查询数据 查询指定shif…
阅读更多...
微服务实战系列之玩转Docker（三）

微服务实战系列之玩转Docker（三）

前言 镜像&#xff08;Image&#xff09;作为Docker的“水源”&#xff0c;取之于它&#xff0c;用之于它。这对于立志成为运维管理的撒手锏——Docker而言&#xff0c;重要性不言而喻。 我们在虚拟机时代&#xff08;当然现在依然ing…&#xff09;&#xff0c;如何快速完成…
阅读更多...
硅谷裸机云多IP服务器怎么样?

硅谷裸机云多IP服务器怎么样?

硅谷裸机云多IP服务器是一种在硅谷地区提供的、具有多个IP地址的裸机云服务器。这种服务器结合了裸机服务器的高性能和云服务器的灵活性&#xff0c;同时提供了多个IP地址&#xff0c;为用户的各种需求提供了支持。以下是关于硅谷裸机云多IP服务器的一些详细信息&#xff0c;ra…
阅读更多...
3.RabbitMQ安装-Centos7

3.RabbitMQ安装-Centos7

官方网址&#xff1a;gInstalling RabbitMQ | RabbitMQ 安装前提&#xff0c;需要一个erlang语言环境。 下载 erlang: Releases rabbitmq/erlang-rpm GitHub rabbitmq-server: 3.8.8 Releases rabbitmq/rabbitmq-server GitHub 安装命令 (说明i表示安装&#xff…
阅读更多...
华清数据结构day2 24-7-17

华清数据结构day2 24-7-17

1> 完成班级的创建&#xff0c;创建时&#xff0c;需要传递班级实际人数 2> 完成班级学生的信息录入工作 3> 完成将班级学生按成绩进行降序排序工作 4> 输出班级中成绩最好和最差学生的信息 5> 完成信息的输出工作 6> 完成班级的销毁工作 要求&#xff1a;班…
阅读更多...
基于springboot+vue+uniapp的驾校预约平台小程序

基于springboot+vue+uniapp的驾校预约平台小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023