【Webpack】基本使用方法

参考视频:

30 分钟掌握 Webpack_哔哩哔哩_bilibili

什么是webpack

简单来说就是一个 打包工具,

可以将互相依赖的html、css、js以及图片字体等资源文件,经过处理打包成一个可执行的项目文件

🌰看例子

环境初始化

在需要使用webpack的文件夹下,

首先执行npm init -y初始化,其中-y表示所有选项使用默认值

再执行npm add webpack webpack-cli --dev将webpack安装到开发者环境中

这样我们就能获得初始的开发环境

基础的例子

新建一个 'src' 文件夹,然后在里面新建一个 'index.js'

console.log("hello word")

编写一个简单的console.log调试功能,同时将这个文件引入 'index.html'

<body><h1>hello world</h1><script src="./index.js"></script></body>

执行一下,类似这样

所以现在我们就能打包这个文件了

执行命令 npx webpack

可以看到生成了 'dist/main.js'

其中main.js就是webpack打包后的内容,可以看到和我们写的console.log一致

所以接下来体验一下webpack整合代码的功能

在src下再写一个文件data.js

然后修改index.js为调用这个getData()函数

然后再执行npx webpack打包代码

可以看到main.js中的代码简化了

说明webpack智能地判断了代码的逻辑,通过import获取了代码,知道我们只打印了这个数组,所以整合到一起的代码就如上图所示

✨配置webpack

这里才是学习webpack的重头戏,毕竟在webpack配置完成后,每次只要执行npx webpack便能智能地完成打包

初步配置

在根目录下新建一个'webpack.config.js'文件

const path=require('path')module.exports={//环境配置   development开发者    production  生产者mode:"development",
//方便查看源代码
devtool:"inline-source-map",//入口文件entry:"./src/index.js",//打包文件名output:{//文件名filename:"dist.js",//文件路径path:path.resolve(__dirname,"dist")}
}

其中

  • mode,选择了开发者模式
  • entry,选择了相对于config文件的src目录下的index.js作为入口文件
  • output, 对于输出配置了输出的名字,并且使用了自带的path配置了输出目录

执行npx webpack,可以看到不仅重新输出了dist.js,其中的内容也和之前的有了不一样

打包CSS文件和图片

要先安装 npm add --dev style-loader css-loader

然后要在webpack.config.js里对需要引入的文件名进行配置,如css文件的配置如下

  module: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"],},],},

同理要多配置图片文件则再写一个rules中的元素即可

  module: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: "asset/resource",},],},

所以在入口文件index.js中引入style.css和图片assets/images/avater.jpg即可

使用webpack插件自动生成html文件

还是安装

npm add html-webpack-plugin --dev

然后导入webpack.config.js文件

const HtmlWebpackPlugin = require("html-webpack-plugin")

再进行配置即可

  plugins:[new HtmlWebpackPlugin()],

所以这时候再执行打包命令,可以看到输出文件夹下还多了一个index.html

这个HTML的标题默认为Webpack App

我们也可以对这个进行配置

兼容低版本浏览器

要让新的JavaScript的特性兼容低版本的浏览器,需要用到babel,而webpack也支持相应的loader

所以首先还是安装

npm add --dev babel-loader @babel/core @babel/preset-env

这三个包提供了我们需要的功能

然后再进行下面的配置

{test: /\.js$/,exclude: /node_modules/,use: {loader: "babel-loader",options: {presets: ["@babel/preset-env"],},},
},

压缩打包后的js代码

同样是两步,先安装

npm add --dev terser-webpack-plugin

然后引入和配置

const TerserPlugin = require("terser-webpack-plugin")

  optimization: {minimize: true,minimizer: [new TerserPlugin()],},

无需执行命令自动打包

现在每次修改了代码后都得重新执行打包命令

webpack也提供了一个插件能在保存后自动打包

还是先安装

npm add --dev webpack-dev-server

然后先在webpack.config.js中进行配置

  devServer: {static: "./dist",},

再在package.json中进行配置

  "scripts": {"start": "webpack serve --open"},

这样在我们执行npm start的时候就会自动执行webpack serve

并且通过 npm start 打开的网页能在我们修改保存后自动刷新页面

避免浏览器缓存js文件

由于现在每次生成的文件名都是dist.js,所以浏览器会对这个文件进行缓存,进而不更新

为了避免进行缓存,可以给文件名添加一段随机的字符,每次更新后都生成新的随机字符

所以在webpack.config.js中配置输出即可

output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),},

配置可视化打包工具

这是一个帮助分析的工具,它会可视化地展现打包过程中哪个文件占的体积比较大

所以同样的,先是安装这个插件

npm add --dev webpack-bundle-analyzer

接着在配置中引入这个插件

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer");

以及在plugins中添加它

  plugins: [new HtmlWebpackPlugin({title: "test",}),new BundleAnalyzerPlugin.BundleAnalyzerPlugin()],

所以此时再运行npx webpack

自动跳出了这样的文件分析图

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

C语言 09 流程控制

if 如果需要判断某个条件&#xff0c;当满足此条件时&#xff0c;才执行某些代码&#xff0c;那这个时候该怎么办呢&#xff1f;可以使用if语句来实现&#xff1a; #include <stdio.h>int main() {int i 0;// 只希望i大于10的时候才执行下面的打印语句if (i > 10) …

YUM配置文件开启缓存

可设置一台服务器或者云主机作为外网YUM源&#xff0c;并且开启yum在线下载缓存&#xff0c;之后可将服务器所有安装包缓存同步到内网本地。 # vim /etc/yum.conf 将 “keepcache0” 改为 “keepcache1” 缓存目录为 /var/cache/yum/xxx/xxx/xxx 日后可下载到本地然后上传到…

024集—— 正则表达式、replace、DateTime日期的用法——C#学习笔记

DateTime 是一个struct结构体。 代码如下&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace ConsoleApp1 {internal class Program{static void Main(string[] args){args new s…

HNU OS实验六

本内容针对湖南大学特色os实验前言 — os2024 lab 文档

ubuntu驱动掉了,重装nvidia驱动

跑深度学习&#xff0c;忽然发现显卡驱动掉了 主要根据这篇文章&#xff1a;[超级详细系列]ubuntu22.04配置深度学习环境(显卡驱动CUDAcuDNNPytorch)--[1]安装显卡驱动_ubuntu22 cuda cudnn pytorch-CSDN博客 用里面的在线安装方法不行&#xff0c;换成用2.2 离线安装方法。从…

动态路由和路由导航守卫及其案例分析

为什么需要动态路由&#xff1f; 动态路由其实用的不多&#xff0c;在实际开发中&#xff0c;如果遇到权限分配问题&#xff0c;比如对于一个公司人员的后台管理系统&#xff0c;那对不同成员的权限肯定不同&#xff0c;对于人事部&#xff0c;他们有权限进入成员表对人员的流…

云计算实训41——部署project_exam_system项目(续)

# 创建脚本&#xff0c;可以在java环境中运行任何的jar包或者war包#!/bin/bash/usr/local/jdk/bin/java -jar /java/src/*.?ar一、思路分析 &#xff08;1&#xff09;nginx 1、下载镜像&#xff0c;将本地的dist项目的目录挂载在容器的/usr/share/nginx/html/ 2、启动容器 …

性能工具之 JMeter ajax 简单登录案例实战

文章目录 一、前言二、前置工作三、登陆密码分析四、JMeter脚本开发四、登陆性能分析五、小结 一、前言 想起论语中的 “学而时习之不亦说乎” &#xff0c;也想找个开源项目实战一把&#xff0c;下面用一个开源ERP系统中的登陆做今天的实战。 二、前置工作 开源ERP项目地址…

getLocation:fail, the permission value is offline verifying

getLocation:fail, the permission value is offline verifying 后端会根据appid和secret生成 签名&#xff0c;前端wx配置时一定用appid来验证签名的正确 本次错误为配置初始化失败&#xff1a;前端与后端的appId不一致&#xff0c;我的失误也

IP 协议详解

一、认识 IP 地址与网络层的职责 网络层是OSI七层模型中的第三层&#xff0c;也是TCP/IP四层模型中的网络接入层。在这一层&#xff0c;数据包被封装并加上IP层的头部信息&#xff0c;以便在网络之间传输。网络层的主要功能包括路由选择、分段与重组、拥塞控制以及IP地址管理等…

stm32的内部时钟源 | RC震荡电路

文章目录 前言学习了解 前言 了解到 内部高速RC振荡器&#xff08;HSI&#xff09;就是RC震荡器实现的&#xff0c;故想对RC震荡做些了解与分析。 学习了解 【不需要晶振&#xff0c;也可产生时钟脉冲&#xff01;RC振荡器的工作原理&#xff0c;维恩电桥振荡器&#xff01;…

Mental-LLM——通过在线文本数据利用大型语言模型进行心理健康预测

概述 源码地址&#xff1a;https://github.com/neuhai/Mental-LLM.git 论文地址&#xff1a;https://arxiv.org/abs/2307.14385 在一项关于哪些法律硕士适合精神健康护理的研究中&#xff0c;对以下五种法律硕士进行了比较 羊驼-7b。羊驼-LoRA。FLAN-T5-XXLGPT-3.5GPT-4. 作…

AT+MQTT指令连接华为云实现数据上传

1 准备工作 硬件设备模块&#xff1a;ESP-01-S 固件烧录工具&#xff1a;ESP8266下载器 串口调试工具&#xff1a;VOFA参考文章&#xff1a;stm32AT指令ESP8266接入华为云物联网平台并完成属性上报与下发的命令处理 2 固件更新 2.1 为什么要重新安装固件 由于ESP-01-S模块出…

快速入门Go:Go + gin + MongoDB

Go 进阶:Go + gin + MongDB 极速搭建EcommerceSys电商系统 前言 本章节适合有一定基础的 Golang 初学者,通过简单的项目实践来加深对 Golang 的基本语法和 Web 开发的理解。 本文章持续更新中,请关注… 项目结构 项目流程图 技术栈(待补充)项目结构项目路由 (待补充) …

带你0到1之QT编程:三、打地基QMap的高效用法

此为QT编程的第三谈&#xff01;关注我&#xff0c;带你快速学习QT编程的学习路线&#xff01; 每一篇的技术点都是很很重要&#xff01;很重要&#xff01;很重要&#xff01;但不冗余&#xff01; 我们通常采取总-分-总和生活化的讲解方式来阐述一个知识点&#xff01; 码…

KEYSIGHT U2020 X系列 USB峰值和均值功率传感器

​ _是德(KEYSIGHT) _ U2020 X系列 USB峰值和均值功率传感器 苏州新利通仪器仪表 U2020 X 系列功率传感器得到 Keysight BenchVue 软件的支持。使用 BenchVue 软件&#xff0c;您无需编程便可轻松控制功率计记录数据&#xff0c;并以各种形式显示测量结果。 只需将传感器…

计算机岗位(面试)

计算机岗位&#xff08;面试&#xff09; 计算机主要有哪几部分构成&#xff1f;计算机组成原理的内容&#xff1f; 计算机主要由‌硬件和软件‌两大部分构成。‌硬件部分包括五大基本组件&#xff1a;‌‌运算器、‌控制器、‌存储器、‌输入设备和输出设备‌‌。‌具体来说&a…

仿华为车机UI--图标从Workspace拖动到Hotseat同时保留图标在原来位置

基于Android13 Launcher3,原生系统如果把图标从Workspace拖动到Hotseat里则Workspace就没有了&#xff0c;需求是执行拖拽动作后&#xff0c;图标同时保留在原位置。 实现效果如下&#xff1a; 实现思路&#xff1a; 1.如果在workspace中拖动&#xff0c;则保留原来“改变图标…

【开源免费】基于SpringBoot+Vue.JS高校校园招聘服务系统(JAVA毕业设计)

本文项目编号 T 010 &#xff0c;文末自助获取源码 \color{red}{T010&#xff0c;文末自助获取源码} T010&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…

渗透测试靶机---- DC系列 DC-4

渗透测试靶机---- DC系列 DC-4 开启靶机&#xff0c;登录页面&#xff0c;平平无奇 扫描ip 端口&#xff0c;服务等信息 访问80 登录窗&#xff01;&#xff01;&#xff01; 这里说明了admin信息&#xff0c;那么就直接爆破这个admin的密码 密码&#xff1a;happy 登录成功 在…