第2集丨webpack 江湖 —— 创建一个简单的webpack工程demo

目录

  • 一、创建webpack工程
    • 1.1 新建 webpack工程目录
    • 1.2 项目初始化
    • 1.3 新建src目录和文件
    • 1.4 安装jQuery
    • 1.5 安装webpack
    • 1.6 配置webpack
      • 1.6.1 创建配置文件:webpack.config.js
      • 1.6.2 配置dev脚本
      • 1.7 运行dev脚本
    • 1.8 查看效果
    • 1.9 附件
      • 1.9.1 package.json
      • 1.9.2 webpack.config.js
      • 1.9.3 index.js
      • 1.9.4 index.html
  • 二、webpack打包默认值
    • 2.1 默认值
    • 2.2 修改默认值

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图( dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

纸上得来终觉浅,绝知此事要躬行。此次目标是:创建一个简单的webpack工程demo,来理解webpack的运行机制。最终的工程目录结构如下所示:
在这里插入图片描述

一、创建webpack工程

1.1 新建 webpack工程目录

  • 新建一个 webpack 文件夹

  • 打开该文件夹的cmd: 选中文件夹目录,输入cmd
    在这里插入图片描述

1.2 项目初始化

  • 在打开的cmd窗口中,执行命令 npm init -y,此时会在webpack 目录下生成文件package.json
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm init -y
Wrote to D:\A_MyWork\M05.MYCode\vscode\javascript\webpack\package.json:{"name": "webpack","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.3 新建src目录和文件

  • webpack目录下,新建src源代码目录。
  • 并在src 目录下,新建 index.html、和 index.js

1.4 安装jQuery

  • 执行命令:npm install jquery -S
  • -S--save的简写
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm install jquery -Sadded 1 package in 2sD:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.5 安装webpack

  • 执行命令:npm install webpack webpack-cli -D
  • -D--save-dev的简写
  • 若想指定版本号,用@符指定:npm install webpack@5.88.2 webpack-cli@5.1.4 -D
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm install webpack webpack-cli -Dadded 117 packages in 6sD:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.6 配置webpack

1.6.1 创建配置文件:webpack.config.js

module.exports = {mode:'development'	//指定构建模式,可选值有:production和development
}

1.6.2 配置dev脚本

  • 打开文件 package.json,新增如下代码
 "scripts": {"dev": "webpack"},

1.7 运行dev脚本

  • 执行命令:npm run dev,对项目进行打包构建,此时构建成功之后会在生成dist目录和main.js
  • 在运行该命令npm run dev 的时候,会先读取 webpack.config.js 配置文件
D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm run dev> webpack@1.0.0 dev
> webpackasset main.js 319 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 279 KiB./src/index.js 396 bytes [built] [code generated]./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]
webpack 5.88.2 compiled successfully in 312 msD:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

1.8 查看效果

  • 运行index.html,查看效果.

1.9 附件

1.9.1 package.json

{"name": "webpack","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack"},"keywords": [],"author": "","license": "ISC","dependencies": {"jquery": "^3.7.0"},"devDependencies": {"webpack": "^5.88.2","webpack-cli": "^5.1.4"}
}

1.9.2 webpack.config.js

module.exports = {mode:'development'
}

1.9.3 index.js

import $ from 'jquery'$(function () {$("li:odd").css('background-color','red')$("li:even").css('background-color','pink')
})

1.9.4 index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="./index.js"></script> --><script src="../dist/main.js"></script>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>
</body>
</html>

二、webpack打包默认值

2.1 默认值

webpack中,有如下默认约定:

  • 默认的打包入口文件为 src/index.js
  • 默认的输出文件路径为 dist/main.js

2.2 修改默认值

我们,可以在 webpack.config.js 配置文件中,修改默认值:

// 导入node.js中专门操作路径的模块
const path = require("path")    
module.exports = {mode:'development',// 打包入口的文件路径,__dirname表示当前文件的存放路径,即工程路径entry:path.join(__dirname,'./src/index.js'),output: {// 输出文件的存放路径path: path.join(__dirname,'./dist'),// 输出文件的名称filename: 'bundle.js'}
}

我们再次执行命令:npm run dev,此时生成的文件名就变成了bundle.js

D:\A_MyWork\M05.MYCode\vscode\javascript\webpack>npm run dev> webpack@1.0.0 dev
> webpackasset bundle.js 319 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 279 KiB./src/index.js 396 bytes [built] [code generated]./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]
webpack 5.88.2 compiled successfully in 692 msD:\A_MyWork\M05.MYCode\vscode\javascript\webpack>

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

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

相关文章

ReactRouterv5在BrowserRouter和HashRouter模式下对location.state的支持

结论&#xff1a;HashRouter不支持location.state 文档&#xff1a;ReactRouter v5 从文档可看到history.push()方法支持2个参数&#xff1a;path, [state] state即是location.state&#xff0c;常用于隐式地传递状态参数 但文档未提的是&#xff0c;仅适用于BrowserRouter&am…

《面试1v1》Kafka的架构设计是什么样子

&#x1f345; 作者简介&#xff1a;王哥&#xff0c;CSDN2022博客总榜Top100&#x1f3c6;、博客专家&#x1f4aa; &#x1f345; 技术交流&#xff1a;定期更新Java硬核干货&#xff0c;不定期送书活动 &#x1f345; 王哥多年工作总结&#xff1a;Java学习路线总结&#xf…

百度开发者平台API地理编码,根据地址获取经纬度

地理编码 | 百度地图API SDK (baidu.com) 原始csv # encoding:utf-8 import requests import csv import json # 接口地址 url "https://api.map.baidu.com/geocoding/v3"# 此处填写你在控制台-应用管理-创建应用后获取的AK ak "XXXXXXX"# 创建CSV文件并…

04-树6 Complete Binary Search Tree

思路&#xff1a; 先排序 用数组建一棵空树 中序遍历填数 顺序输出即为层次遍历

企业电子招投标采购系统源码之-java spring cloud+spring boot

​ 信息数智化招采系统 服务框架&#xff1a;Spring Cloud、Spring Boot2、Mybatis、OAuth2、Security 前端架构&#xff1a;VUE、Uniapp、Layui、Bootstrap、H5、CSS3 涉及技术&#xff1a;Eureka、Config、Zuul、OAuth2、Security、OSS、Turbine、Zipkin、Feign、Monitor、…

PC音频框架学习

1.整体链路 下行播放&#xff1a; App下发音源→CPU Audio Engine 信号处理→DSP数字信号处理→Codec DAC→PA→SPK 上行录音&#xff1a; MIC拾音→集成运放→Codec ADC→DSP数字信号处理→CPU Audio Engine 信号处理→App 2.硬件 CPU PCH DSP(可选) Codec PA SPKbox MIC…

Ansible安装部署与应用

文章目录 一、ansible简介二、ansible 环境安装部署三、ansible 命令行模块3.1 command 模块3.2 shell 模块3.3 cron 模块3.4 user 模块3.5 group 模块3.6 copy 模块3.7 file 模块3.8 hostname 模块3.9 ping 模块3.10 yum 模块3.11 service/systemd 模块3.12 script 模块3.13 m…

latex论文----写作代码

一般来说论文机构会给定latex模板代码&#xff0c;我们只需要知道怎么写就行&#xff0c;格式机构都给你调好了 1 各类标题 section是最大的标题&#xff0c;后边每一级小标题&#xff0c;都在前边加个sub就行 \section{Method} \subsection{Dataset} \subsubsection{Dataset…

Mac 系统钥匙串证书不受信任

Mac 系统钥匙串证书不受信任 解决办法 通过尝试安装 Apple PKI 的 Worldwide Developer Relations - G4 (Expiring 12/10/2030 00:00:00 UTC) 解决该异常问题 以上便是此次分享的全部内容&#xff0c;希望能对大家有所帮助!

【图论】LCA(倍增)

一.LCA介绍 LCA通常指的是“最近共同祖先”&#xff08;Lowest Common Ancestor&#xff09;。LCA是一种用于解决树或图结构中两个节点的最低共同祖先的问题的算法。 在树结构中&#xff0c;LCA是指两个节点的最近层级的共同祖先节点。例如&#xff0c;考虑一棵树&#xff0c;…

element-ui form表单的动态rules校验

在vue 项目中&#xff0c;有时候可能会用到element-ui form表单的动态rules校验&#xff0c;比如说选择了哪个选项&#xff0c;然后动态显示或者禁用等等。 我们可以巧妙的运用element-ui form表单里面form-item想的校验规则来处理&#xff08;每一个form-item项都可以单独校验…

Elasticsearch-倒排索引

Elasticsearch和Lucene的关系 Lucene 是一个开源、免费、高性能、纯 Java 编写的全文检索引擎&#xff0c;可以算作是开源领域最好的全文检索工具包。ElasticSearch 是基于Lucene实现的一个分布式、可扩展、近实时性的高性能搜索与数据分析引擎。 Lucene索引层次结构 Lucene的…

组件间通信案例练习

1.实现父传子 App.vue <template><div class"app"><tab-control :titles["衣服","鞋子","裤子"]></tab-control><tab-control :titles["流行","最新","优选","数码&q…

win10系统wps无法启动(打开文档)

我的win10系统中&#xff0c;之前可以顺畅地打开wps&#xff0c;但最近无法打开文档&#xff0c;停留在启动页面&#xff0c;在任务管理器中可以看到启动的wps线程&#xff0c;如果继续双击文档&#xff0c;线程增加&#xff0c;但依然无法打开文档。 wps版本是刚刚更新的15120…

代码随想录算法训练营第二十五天 | 读PDF复习环节3

读PDF复习环节3 本博客的内容只是做一个大概的记录&#xff0c;整个PDF看下来&#xff0c;内容上是不如代码随想录网站上的文章全面的&#xff0c;并且PDF中有些地方的描述&#xff0c;是很让我疑惑的&#xff0c;在困扰我很久后&#xff0c;无意间发现&#xff0c;其网站上的讲…

海外ASO优化之应用商店本地化

大多数应用可供世界任何地方的用户使用&#xff0c;所以需要以多种不同语言来展示我们的应用。它能够包含在跨地理区域的搜索结果中&#xff0c;从而提高全球可见性和转化率。 1、关键词的研究&#xff0c;对于确定流行的本地关键词至关重要。 在本地化Google Play的应用页面时…

java商城系统和php商城系统有什么差异?如何选择?

java商城系统和php商城系统是两种常见的电子商务平台&#xff0c;它们都具有一定的优势和劣势。那么&#xff0c;java商城系统和php商城系统又有哪些差异呢&#xff1f; 一、开发难度 Java商城系统和PHP商城系统在开发难度方面存在一定的差异。Java商城系统需要使用Java语言进…

Android中绘制的两个天气相关的View

文章目录 一、前言二、降雨的代码三、风向代码 一、前言 开发天气相关软件时候&#xff0c;做了两个自定义View&#xff0c;这里进行记录&#xff0c;由于涉及类较多&#xff0c;这里仅包含核心代码&#xff0c;需要调整后才可以运行&#xff0c;自定义View范围仅包含网格相关…

数学建模学习(5):数学建模各类题型及解题方案

一、数学建模常见的题型 总体来说&#xff0c;数学建模赛题类型主要分为&#xff1a;评价类、预测类和优化类三种&#xff0c;其中优化类是最常见的赛题类 型&#xff0c;几乎每年的地区赛或国赛美赛等均有出题&#xff0c;必须要掌握并且熟悉。 二、评价类赛题 综合评价是数学…

SIP视频对讲sip广播网关

SV-PA2是专门对行业用户需求研发的一款SIP音视频对讲&#xff0c;媒体流传输采用标准IP/RTP/RTSP协议。它很好的继承了锐科达话机稳定性好、电信级音质的优点&#xff0c;且完美兼容当下所有基于SIP的主流IPPBX/软交换/IMS平台,如Asterisk, Broadsoft, 3CX, Elastix 等。它集多…