当前位置： 首页 > news >正文

Webpack 安装教程

news 2025/11/5 23:23:29

Webpack 是一个前端资源加载/打包工具。

安装 Webpack

使用 cnpm 安装 webpack：

cnpm install webpack -g


创建项目
接下来我们创建一个目录 app：

mkdir app


在 app 目录下添加 runoob1.js 文件，代码如下：

app/runoob1.js 文件document.write("It dashu.");app/index.html 文件<html><head><meta charset="utf-8"></head><body><script type="text/javascript" src="bundle.js" charset="utf-8"></script></body>
</html>

接下来我们使用 webpack 命令来打包：

webpack dashu.js bundle.js

配置文件

app/webpack.config.js 文件
module.exports = {entry: "./dashu.js",output: {path: __dirname,filename: "bundle.js"},module: {loaders: [{ test: /\.css$/, loader: "style-loader!css-loader" }]}
};

插件

cnpm install webpack --save-dev

安装

cnpm install webpack-dev-server -g

运行

webpack-dev-server --progress --colors

相关文章：

Webpack 安装教程

Webpack 是一个前端资源加载/打包工具。 安装 Webpack 使用 cnpm 安装 webpack&#xff1a; cnpm install webpack -g 创建项目 接下来我们创建一个目录 app&#xff1a; mkdir app 在 app 目录下添加 runoob1.js 文件&#xff0c;代码如下&#xff1a; app/runoob1.js 文件…...

编程日记 2023/8/2 2:02:10

移远通信首批加入“5G+eSIM计算终端产业合作计划”，助力大屏移动终端全时在线

7月29日&#xff0c;在全球数字娱乐产业盛会 ChinaJoy上&#xff0c;中国联通携手高通公司、GSMA发布了“5GeSIM 计算终端产业合作计划”。 作为全球领先的物联网整体解决方案供应商&#xff0c;移远通信首批加入该计划&#xff0c;副总经理刘明辉受邀参加5GeSIM 计算终端产业合…...

编程日记 2023/8/2 2:01:08

全网最强大的工具箱—utools介绍及分享

今天来介绍一个相见恨晚的PC端工具——utools&#xff0c;什么是utools&#xff1f;用其自身的话来说&#xff1a;“uTools是一个极简、插件化、跨平台的现代化桌面软件。通过自由选配丰富的插件&#xff0c;打造你得心应手的工具集合。”,体验了下&#xff0c;好用且强大&…...

编程日记 2023/8/2 2:00:07

Linux常用基础命令❀

文章目录❀ ❀ls命令 ❀cd命令 ❀pwd命令 ❀date命令 ❀创建、删除文件和目录命令 ❀alias命令 ❀复制、移动、重命名、查看&#xff08;文件、目录&#xff09;命令 ❀find查找、wc统计命令 ❀vi/vim命令 1、打开文件 2、工作模式 vi与vim的四个模式 进入编辑模式…...

编程日记 2023/8/2 1:59:05

SQL-进阶

mysql --local-infile -u root -pset global local_infile 1;load data local infile 目录 into able 表名 fields terminated by , lines terminated by \n;...

编程日记 2023/8/2 1:58:01

[Pytorch]卷积运算conv2d

文章目录 [Pytorch]卷积运算conv2d一.F.Conv2d二.nn.Conv2d三.nn.Conv2d的运算过程 [Pytorch]卷积运算conv2d 一.F.Conv2d torch.nn.functional.Conv2d()的详细参数&#xff1a; conv2d(input: Tensor, weight: Tensor, bias: Optional[Tensor]None, stride: Union[_int, _s…...

编程日记 2023/8/2 1:57:00

主流开源监控系统一览

减少故障有两个层面的意思&#xff0c;一个是做好常态预防&#xff0c;不让故障发生&#xff1b;另一个是如果故障发生&#xff0c;要能尽快止损&#xff0c;减少故障时长。而监控的典型作用&#xff0c;就是帮助我们发现及定位故障&#xff0c;这两个环节对于减少故障时长至关…...

编程日记 2023/8/2 1:55:59

爬虫原理详解及requests抓包工具用法介绍

文章目录 一、什么是爬虫&#xff1f;二、爬虫的分类三、网址的构成四、爬虫的基本步骤五、动态页面和静态页面六、伪装请求头七、requests库介绍1. 概念&#xff1a;2. 安装方式&#xff08;使用镜像源&#xff09;&#xff1a;3. 基本使用&#xff1a;4. response对象对应的方…...

编程日记 2023/8/2 1:54:58

tinkerCAD案例：31. 3D 基元形状简介

tinkerCAD案例&#xff1a;31. 3D 基元形状简介 1 将一个想法从头脑带到现实世界是一次令人兴奋的冒险。在 Tinkercad 中&#xff0c;这将从一个新的设计开始。 在新设计中&#xff0c;简单的原始形状可以通过不同的方式组合成更复杂的形状。 在这个项目中&#xff0c;你将探索…...

编程日记 2023/8/2 1:53:57

Vue2基础一、快速入门

零、文章目录 Vue2基础一、快速入门 1、Vue 概念 &#xff08;1&#xff09;为什么学 前端必备技能 岗位多&#xff0c;绝大互联网公司都在使用Vue 提高开发效率 高薪必备技能&#xff08;Vue2Vue3&#xff09; &#xff08;2&#xff09;Vue是什么 **概念&#xff1a;…...

编程日记 2023/8/2 1:52:56

【POJ-3279】Fliptile（递推+搜索）

POJ-3279. Fliptile&#xff08;递推搜索&#xff09; Vjudge链接 题目描述 农场主约翰知道&#xff0c;一头智力得到满足的奶牛是一头快乐的奶牛&#xff0c;它会产更多的奶。他为奶牛安排了一项脑力活动&#xff0c;让它们摆弄一个 M N M N MN 的方格 ( 1 ≤ M ≤ 15 …...

编程日记 2023/8/2 1:51:55

522个matplotlib绘图案例，包含：折线图、散点图、条形图、饼图、直方图、3D图等，源码可直接运行！

文章目录 matplotlib介绍图表介绍折线图&#xff08;Line Plot&#xff09;散点图&#xff08;Scatter Plot&#xff09;条形图&#xff08;Bar Plot&#xff09;饼图&#xff08;Pie Chart&#xff09;直方图&#xff08;Histogram&#xff09;箱线图&#xff08;Box Plot&…...

编程日记 2023/8/2 1:50:54

windows安装Elasticsearch8.9.0

官网解压安装好路径&#xff08;非中文&#xff0c;无空格&#xff09; 可参考 言之有李LAX csdn http://t.csdn.cn/S2oju本人使用jdk17 修改配置elasticsearch.yml xpack.security.enabled: false xpack.security.http.ssl:enabled: false直接点击bin\elasticsearch.bat…...

编程日记 2023/8/2 1:49:53

用Delphi编写一个通用视频转换工具，让视频格式转换变得更简单

用Delphi编写的简单视频格式转换程序&#xff0c;它使用TComboBox、TOpenDialog和TSaveDialog组件来选择转换格式、选择源视频文件和选择目标视频文件。程序还使用TEdit组件允许用户输入参数&#xff0c;然后将这些组件中的信息拼接成转换命令并在DOS窗口中运行它。 procedure…...

编程日记 2023/8/2 1:48:50

Kafka系列之：安装Know Streaming详细步骤

Kafka系列之：安装Know Streaming详细步骤 一、相关技术博客二、安装elasticsearch1.下载elasticsearch2.创建数据目录3.创建es用户4.修改最大文件数5.解压elasticsearch6.赋予es用户目录权限7.修改es配置8.切换es用户启动elasticsearch三、安装KnowStreaming1.下载KnowStreami…...

编程日记 2023/8/2 1:47:49

绝杀 GETPOST 嵌套的 JSON 参数

JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;常用于Web应用程序中的数据传输。在HTTP数据包信息传递时&#xff0c;JSON扮演着非常正常的角色&#xff0c;因为它是一种通用的数据格式&#xff0c;可以被多种编程语言和应用程…...

编程日记 2023/8/2 1:46:48

Spring 项目过程及如何使用 Spring

文章目录 1.创建 Spring 项目步骤1.1 创建 Maven 项目1.2添加 Spring 框架支持1.3 添加启动项2.如何使用 Spring2.1 存储 Bean 对象2.1.1 创建 Bean对象2.1.2 将 Bean对象注册到容器中 2.2 获取并使用 Bean对象2.2.1 使用 ApplicationContext 获取对象2.2.2 使用 BeanFactory 获…...

编程日记 2023/8/2 1:45:47

信息学奥赛一本通——1258：【例9.2】数字金字塔

文章目录 题目【题目描述】【输入】【输出】【输入样例】【输出样例】 AC代码 题目 【题目描述】 观察下面的数字金字塔。写一个程序查找从最高点到底部任意处结束的路径&#xff0c;使路径经过数字的和最大。每一步可以从当前点走到左下方的点也可以到达右下方的点。 在上面…...

编程日记 2023/8/2 1:44:45

selenium官网文档阅读总结（day 2）

1.selenium元素定位方法 1.1selenium命令 当我们使用chormdriver打开网页后&#xff0c;接下来就要用python操作元素&#xff0c;模拟用户会作出的操作&#xff0c;这些操作元素的方法就是命令。比如 (1) click&#xff1a;点击&#xff08;按钮&#xff0c;单选框&#xff…...

编程日记 2023/8/2 1:43:43

VMware虚拟机安装VMware tools

一、挂载光驱 执行以下命令来创建 /mnt/cdrom 目录&#xff1a; mkdir -p /mnt/cdrom-p 参数会确保如果 /mnt/cdrom 的上级目录&#xff08;例如 /mnt&#xff09;不存在的话也会被创建。 然后&#xff0c;你可以再次尝试挂载光盘&#xff1a; mount /dev/sr0 /mnt/cdrom这次…...

编程日记 2023/8/2 1:42:42

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2025/11/4 16:08:05

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/11/4 7:18:19

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/10/19 16:25:32

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/7/21 15:40:47

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/8/4 22:42:24

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/9/17 22:26:02

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/8/27 0:09:05

从“安全密码”到测试体系：Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

编程新知 2025/11/3 10:14:12

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2025/10/26 17:23:14

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

编程新知 2025/9/19 5:31:38