Webpack 安装教程

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

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

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

相关文章

LeetCode每日一题Day4——26. 删除有序数组中的重复项

✨博主&#xff1a;命运之光 &#x1f984;专栏&#xff1a;算法修炼之练气篇&#xff08;C\C版&#xff09; &#x1f353;专栏&#xff1a;算法修炼之筑基篇&#xff08;C\C版&#xff09; &#x1f433;专栏&#xff1a;算法修炼之练气篇&#xff08;Python版&#xff09; …

【分布式任务调度平台 XXL-JOB 急速入门】从零开始将 XXL-JOB 接入到自己的项目

&#x1f4a7; 分布式任务调度平台 X X L − J O B 急速入门&#xff1a;从零开始将 X X L − J O B 接入到自己的项目 \color{#FF1493}{分布式任务调度平台 XXL-JOB 急速入门&#xff1a;从零开始将 XXL-JOB 接入到自己的项目} 分布式任务调度平台XXL−JOB急速入门&#xff1a…

增强知识保护和知识管理:PDM系统的知识库特色

在现代竞争激烈的商业环境中&#xff0c;知识保护和知识管理对企业的发展至关重要。PDM系统&#xff08;Product Data Management&#xff0c;产品数据管理&#xff09;作为一款强大的数字化工具&#xff0c;具备丰富的知识库特色&#xff0c;帮助企业增强知识保护和知识管理的…

《TCP IP 网络编程》第十五章

第 15 章 套接字和标准I/O 15.1 标准 I/O 的优点 标准 I/O 函数的两个优点&#xff1a; 除了使用 read 和 write 函数收发数据外&#xff0c;还能使用标准 I/O 函数收发数据。下面是标准 I/O 函数的两个优点&#xff1a; 标准 I/O 函数具有良好的移植性标准 I/O 函数可以利用…

FPGA学习——蜂鸣器实现音乐播放器并播放两只老虎

文章目录 一、蜂鸣器简介1.1 蜂鸣器分类1.2 PWM 二、C4开发板原理图三、如何产生不同的音调四、代码实现及分析五、总结 一、蜂鸣器简介 1.1 蜂鸣器分类 蜂鸣器一般分为有源蜂鸣器和无源蜂鸣器。二者的区别在于&#xff0c;有源蜂鸣器内部含有振动源和功放电路&#xff0c;只…

前端如何打开钉钉(如何唤起注册表中路径与软件路径不关联的软件)

在前端唤起本地应用时&#xff0c;我查询了资料&#xff0c;在注册表中找到腾讯视频会议的注册表情况&#xff0c;如下&#xff1a; 在前端代码中加入 window.location.href"wemeet:"; 就可以直接唤起腾讯视频会议&#xff0c;但是我无法唤起钉钉 之所以会这样&…

【Android】使用 CameraX 实现基础拍照功能

目录 1. 基础开发环境 2. 添加相关依赖 3. APP 布局 4. 主流程逻辑 5. 调试或安装 APK 6. 项目完整代码 1. 基础开发环境 JDK&#xff1a;JDK17 Android Studio&#xff1a;Android Studio Giraffe | 2022.3.1 Android SDK&#xff1a;Android API 34 Gradle: gradle-7.2…

前端如何并发控制

本文节选自我的博客&#xff1a;前端如何并发控制 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是MilesChen&#xff0c;偏前端的全栈开发者。&#x1f4dd; CSDN主页&#xff1a;爱吃糖的猫&#x1f525;&#x1f4e3; 我的博客&#xff1a;爱吃糖的猫&#x1f4d…

2023年人工智能技术与智慧城市发展白皮书

人工智能与智慧城市是当前热门的话题和概念&#xff0c;通过将人工智能技术应用在城市管理和服务中&#xff0c;利用自动化、智能化和数据化的方式提高城市运行效率和人民生活质量&#xff0c;最终实现城市发展的智慧化&#xff0c;提升城市居民的幸福感。 AI技术在城市中的应…

QT中使用ffmpeg的api进行视频的播放

在了解ffmpeg使用api进行视频的播放之前&#xff0c;我们首先了解一下视频的播放流程。 一、视频的播放流程 首先是我们最常见的视频文件&#xff0c;在播放流程中首先是要打开视频文件&#xff0c;将视频文件中的数据进行解封装&#xff0c;之后再将解封装之后的视频进行解码…

【C#学习笔记】引用类型(2)

文章目录 ObjectEqualsGetTypeToStringGetHashCode string逐字文本复合格式字符串字符串内插 StringBuilderStringBuilder 的工作原理StringBuilder提供的方法访问字符迭代字符查询字符 dynamic Object 支持 .NET 类层次结构中的所有类&#xff0c;并为派生类提供低级别服务。…

【docker】docker镜像原理

目录 一、操作系统组成部分二、Linux文件系统三、docker镜像原理四、说明五、镜像制作5.1 方式一&#xff1a;容器转镜像5.2 方式二&#xff1a;dockerfile5.2.1 dockerfile说明5.2.2 dockerfile关键字 一、操作系统组成部分 1.进程调度子系统 2.进程通信子系统 3.内存管理子系…

Python实现GA遗传算法优化循环神经网络分类模型(LSTM分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 遗传算法&#xff08;Genetic Algorithm&#xff0c;GA&#xff09;最早是由美国的 John holland于20世…

实战 02|「可点击图片」

前言 实践是最好的学习方式&#xff0c;技术也如此。 文章目录 前言一、功能需求&#xff08;一&#xff09;1、功能需求描述 一、功能需求&#xff08;一&#xff09; 1、功能需求描述 用户可以点击图片来执行相应的操作&#xff08;显示 Toast 信息&#xff09;&#xff1b;…

全面解析大语言模型的工作原理

当ChatGPT在去年秋天推出时&#xff0c;在科技行业乃至世界范围内引起了轰动。当时&#xff0c;机器学习研究人员尝试研发了多年的语言大模型&#xff08;LLM&#xff09;&#xff0c;但普通大众并未十分关注&#xff0c;也没有意识到它们变得多强大。 如今&#xff0c;几乎每个…

无代码开发(BIP旗舰版-YonBuilder)

目录 我的应用 新建领域 菜单管理 应用构建 新建应用 对象建模 新增业务对象 新增业务实体 页面建模 新增页面 编辑页面 发布管理 我的应用 角色管理 yonbuilder开发平台&#xff0c;提供标准服务和专业开发服务&#xff1b; 本篇文章只演示标准服务的可视化应用…

new一个构造函数

new 一个构造函数发生了什么&#xff1f; new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 new 关键字会进行如下的操作&#xff1a; 1.创建一个空的简单 JavaScript 对象&#xff0c;即{}&#xff1b; 2.链接该对象到另一个对象(即设置该对象…

Flink State 和 Fault Tolerance详解

有状态操作或者操作算子在处理DataStream的元素或者事件的时候需要存储计算的中间状态&#xff0c;这就使得状态在整个Flink的精细化计算中有着非常重要的地位&#xff1a; 记录数据从某一个过去时间点到当前时间的状态信息。以每分钟/小时/天汇总事件时&#xff0c;状态将保留…

【C++】基础练习(一)||从C到C++函数

C基础练习&#xff08;一&#xff09; 从C 到C函数 从C 到C ⭐️C是在C语言基础山改进发展而来的&#xff0c;是C语言的一个超集。 1.关于C语言和C的关系&#xff0c;以下说法正确的是&#xff1a;A A.C兼容C语言 B.C语言部分兼容C C.C部分兼容C语言 D.C语言兼容C 分析&#x…

调整图片中的人物头像的位置(裁剪图片的时候)

其实调整图片的适应边框的属性 我们首先会想到 object-fit object-fit CSS 属性指定可替换元素&#xff08;例如&#xff1a; 或 &#xff09;的内容应该如何适应到其使用高度和宽度确定的框。 contain 被替换的内容将被缩放&#xff0c;以在填充元素的内容框时保持其宽高比…