webpack 的基本使用

news2024/10/6 4:14:03

webpack 的基本使用

  • 配置 npm 镜像源
  • 创建列表隔行变色案例
      • 新建空白项目目录，初始化 package.json 配置文件
      • 通过 npm 安装 jquery
      • 新建 src 源代码目录
          • index.html
          • index.js
      • 检查网页效果
  • webpack 的安装
      • webpack 的安装
      • dependencies 与 devDependencies
          • 参数 -S 及 --save
          • 参数 -D 及 --save-dev
          • dependencies 与 devDependencies
          • 使用 -S 还是 -D
  • webpack 的配置
      • webpack 配置文件
      • package.json 的 script 节点
  • webpack 的使用
      • 开发模式与发布模式
  • 指定 webpack 的 entry 及 output
      • 举个栗子

配置 npm 镜像源

npm 默认使用的是国外的源对软件包进行安装，我们可以通过将网页链接修改为国内镜像源提升软件包的安装速度。

使用如下修改 npm 镜像源（淘宝镜像源）：

npm config set registry https://registry.npm.taobao.org

使用如下命令观察 npm 程序目前所使用的镜像源：

npm config get registry

目前所使用的镜像源

创建列表隔行变色案例

新建空白项目目录，初始化 package.json 配置文件

在创建空白项目目录后，在该目录下运行如下命令以初始话配置文件：

npm init -y

# 若你希望可以初始话配置文件中的某些信息，可以使用如下命令

npm init

在使用 npm init -y 命令后，你能够在项目文件中观察到新增文件 package.json。

里面的内容如下（可能与你的略有不同）：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

通过 npm 安装 jquery

使用如下命令通过 npm 安装 jquery：

npm install -S jquery

# 或

npm install --save jquery

# 或

npm install jquery

新建 src 源代码目录

在项目根目录下创建 src 文件夹，并在其中放置你的网页文件。

index.html

为实现列表隔行变色效果，我们将创建包含如下内容的 index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表隔行变色效果</title>
</head>
<body>
    <ul>
        <li>这是第 1 个 li</li>
        <li>这是第 2 个 li</li>
        <li>这是第 3 个 li</li>
        <li>这是第 4 个 li</li>
        <li>这是第 5 个 li</li>
        <li>这是第 6 个 li</li>
        <li>这是第 7 个 li</li>
        <li>这是第 8 个 li</li>
        <li>这是第 9 个 li</li>
    </ul>
    <!-- 导入 index.js 文件 -->
    <script src="./index.js"></script>
</body>
</html>

对于上述代码中的九个列表，在 VScode 中可以通过输入如下命令并敲击回车键（Enter）快速生成：

ul>li{这是第 $ 个 li}*9

在这里插入图片描述

index.js

在此我们将使用 ES6 的模块化导入方式来导入 jquery，来验证 webpack 是否具有解决兼容性问题的能力。

import $ from 'jquery'
// 使用 $ 来接受导入的 jquery 模块


// li:add 选中排位位于奇数位次的 li 标签
// li:even 选中排位位于偶数次的 li 标签
$(function(){
    $('li:odd').css('background-color', 'red')
    $('li:even').css('background-color', 'pink')
})

检查网页效果

将 index.html 在浏览器中打开，可以看到希望产生的效果并没有实现。

没有产生希望产生的效果

让我们打开控制台（快捷键 F12），可以观察到报错信息：

Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

大意是我们无法在模块外部使用 import 语句，也就是不支持该语法。
控制台

webpack 的安装

webpack 的安装

在终端中输入如下命令以进行 webpack 的安装：

npm install webpack webpack-cli -D
  1. 如果各位对 webpack 的某个版本较为中意，可以通过使用 @ 符号来指定版本，这里以安装 webpack 5.42.1 来进行演示。
npm install webpack@5.42.1 -D
  1. webpack-cli 是 webpack 的命令行版本。

dependencies 与 devDependencies

在安装完成 webpack 及 webpack-cli 后，让我们把目光望向 package.json 文件。

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

可以看到 jquety 被存放到 dependencies 下，而 webpack 及 webpack-cli 都被存放到 devDependencies 中。照成这种现象的原因与我们两次安装软件包使用的命令参数存在不同。

参数 -S 及 --save

在使用 npm 安装软件包时，默认使用的参数就是 -S 或 –save，使用该参数对包进行安装后，软件包的名称都将出现在 dependencies 中。

参数 -D 及 --save-dev

使用 -D 或 –save-dev 参数对包进行安装后，软件包的名称都将出现在 devDependencies 中。

dependencies 与 devDependencies
  1. dependencies
    dependencies 所包含的包是在开发阶段及发布阶段都需要包含（在两个阶段中发挥作用的软件包）到的软件包。
  2. devDependencies
    devDependencies 所包含的包是在开发阶段需要包含但在发布阶段不需要包含的软件包。

对软件包进行 dependencies 及 devDependencies 进行区分，可以减少在发布阶段所需要打包的内容，减少网站成品所占用的服务器资源。

使用 -S 还是 -D

在开发过程中，我们往往会需要用到很多的软件包，安装这些软件包究竟是使用命令参数 -S 好，还是使用命令参数 -D 好呢？

在安装一个包时如果存在上述疑惑，推荐各位可以使用 npm 官网，里面有许多软件包的具体信息。当然，查看该网站，你还可以收获上述问题的解决之道。

比如，对于 webpack，该网站中存在着如下建议：

建议

webpack 的配置

webpack 配置文件

在对 webpack 进行配置之前，需要在项目根目录下新建 webpack 配置文件，该文件的名称为 webpack.config.js。

在创建该配置文件后，请向该配置文件中输入如下内容：

module.exports = {
	mode: "development"
}

其中：
mode 用来指定模式，其取值有两种，development 用来指定当前项目的模式为 开发模式；production 用来指定当前项目的模式为 发布模式。

package.json 的 script 节点

在配置完成 webpack.config.js 配置文件后，我们需要在 package.json 文件中的 script 节点中添加内容：

"script": {
	"dev": "webpack"
}

修改完成后， package.json 文件大概长这样：

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

webpack 的使用

在终端中使用如下命令使用 webpack 对网页源代码文件进行打包：

npm run dev

在使用该命令后，可以观察到项目文件中多出了一个文件夹 dist，dist 文件夹中的 main.js 文件便是此次 webpack 对文件打包的结果。

由于 main.js 文件是文件打包的结果，所以我们需要对 index.html 进行修改，引入 main.js 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表隔行变色效果</title>
</head>
<body>
    <ul>
        <li>这是第 1 个 li</li>
        <li>这是第 2 个 li</li>
        <li>这是第 3 个 li</li>
        <li>这是第 4 个 li</li>
        <li>这是第 5 个 li</li>
        <li>这是第 6 个 li</li>
        <li>这是第 7 个 li</li>
        <li>这是第 8 个 li</li>
        <li>这是第 9 个 li</li>
    </ul>
    <!-- 导入 main.js 文件 -->
    <script src="../dist/main.js"></script>
</body>
</html>

将 index.html 在浏览器中打开，可以发现该网页已经可以正常运行，webpack 成功的解决了依赖问题。

成功显示页面

开发模式与发布模式

webpack 能够对被打包文件进行压缩混淆，但当我们打开文件 main.js 可以观察到该文件并没有被压缩混淆。但其中的确有部分代码被压缩了，但那是 jquery。我们的 webpack 并没有对打包文件进行压缩混淆。

原因是：
压缩混淆所需要的时间往往都比较长，在开发阶段每次打包都需要耗费较多的时间用于打包是得不偿失的。如果需要对被打包文件进行压缩混淆，就需要我们对 webpack.config.js 文件进行配置，将模式设置为 发布模式（production） 即可。

为使用 webpack 的压缩混淆功能，我们将 webpack.config.js 中的内容修改为如下结果：

module.exports = {
	mode: "production"
}

修改完成后，我们再次运行如下命令：

npm run dev

由程序打印的消息，我们可以观察到，本次打包程序所耗费的时间是使用开发模式打包所耗费时间的近 七倍，所耗费的空间是使用开发模式进行打包所耗费空间的近 四倍。

指定 webpack 的 entry 及 output

在 webpack 4.x 及 5.x 的版本中，默认存在如下约定：

  1. 默认的入口文件为：
    项目文件根目录下的 src 文件夹中的 index.js 文件。
  2. 默认的导出文件为：
    项目文件根目录下的 dist 文件夹中的 main.js 文件。

我们可以通过修改 webpack.config.js 来对入口文件及导出文件进行修改。

举个栗子

将导出文件设置为 项目文件根目录下的 result 文件夹中的 bundle.js 文件；将输入文件显式设置为 webpack 的默认输入文件。

为达成上述目的，我们将 webpack.config.js 做出如下修改：

const path = require("path");


module.exports = {
	mode: "development",
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './result'),
        filename: 'bundle.js'
    }
}

其中：

  1. path.join( […paths] )
    paths: 它是逗号分隔的一系列路径，这些路径将连接在一起以构成最终路径。构成的最终路径将作为返回值返回。
    join() 是 Node.js 下的 path 模块中的函数，所以使用该函数前需要通过 require() 函数将其导入。
  2. __dirname
    __dirname 指当前文件所在的文件夹，由于 webpack.config.js 位于项目文件的根目录下，所以此处的 __dirname 代指项目文件所在的路径。
  3. 在该配置文件中，我们使用 entry 来定义入口文件，使用 output 来定义导出文件。

在配置完成配置文件 webpack.config.js 后，我们使用命令 npm run dev，可以发现导出文件已在指定路径下成功显示，这表明我们对导入导出文件的设置是正确的。

成功修改导入导出文件

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

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

相关文章

【Linux工具】-yum/gdb

【Linux工具】-yum/gdb

yum/gdb一&#xff0c;yum1&#xff0c;简介2&#xff0c;软件下载3&#xff0c;软件删除4&#xff0c;yum源与扩展yum源5&#xff0c;常见选项二&#xff0c;gdb1&#xff0c;简介2&#xff0c;gdb相关指令一&#xff0c;yum 1&#xff0c;简介 在Linux下&#xff0c;下载软…
阅读更多...
中国芯片迎难而上，4纳米芯片量产，美媒：美国或肠子都悔青了

中国芯片迎难而上，4纳米芯片量产，美媒：美国或肠子都悔青了

日前美国媒体《财富》杂志发表相关文章&#xff0c;认为对中国的芯片限制对美国是弊大于利&#xff0c;倒逼中国芯片加快芯片产业发展进程&#xff0c;而美国芯片却蒙受了太大的损失&#xff0c;与美国方面打擂台。美媒发表这篇文章之际&#xff0c;恰恰是中国芯片企业宣布近期…
阅读更多...
TikTok不可思议的崛起

TikTok不可思议的崛起

武汉瑞卡迪电子商务有限公司&#xff1a;《华尔街日报》网站11月5日发表题为《TikTok不可思议的崛起》的文章&#xff0c;全文摘编如下&#xff1a; 在短短五年里&#xff0c;TikTok已经爆发成为一种流行文化现象以及一个地缘政治闪爆点。它是全世界最热门的应用&#xff0c;被…
阅读更多...
Vue纯前端：榜单管理系统

Vue纯前端：榜单管理系统

文章目录:一、主要功能&#xff1a;二、实现效果&#xff1a;1.主页:2.注册&#xff1a;3.登录&#xff1a;4.列表界面&#xff1a;5.添加应用界面&#xff1a;6.修改应用界面&#xff1a;7.模糊查询&#xff1a;三、整体架构&#xff1a;四、配置文件说明&#xff1a;五、功能…
阅读更多...
icp备案号怎么申请?icp备案号哪里查询

icp备案号怎么申请?icp备案号哪里查询

ICP备案就是对网站的开办者信息的备案登记&#xff0c;以确保网站开办者的真实合法性。购买域名后&#xff0c;需要通过ICP备案才能开通域名解析服务。未通过ICP备案的网站&#xff0c;会有被查处关停的风险&#xff0c;备案的目的就是为了防止在网上从事非法的网站经营活动&am…
阅读更多...
nexus可以访问但是maven无法拉取jar的一种答案

nexus可以访问但是maven无法拉取jar的一种答案

现象&#xff1a; 错误日志&#xff1a; Could not transfer metadata com.*.*:*-common-lib:2.0.0-SNAPSHOT/maven-metadata.xml from/to nexus-snapshot (https://mvn.*.*.com.cn/repository/snapshots/): sun.security.validator.ValidatorException: PKIX path building f…
阅读更多...
【操作系统实验/Golang】实验1：进程调度（FCFS, SJF, RR）

【操作系统实验/Golang】实验1：进程调度（FCFS, SJF, RR）

1 实验问题描述设计程序模拟进程的先来先服务FCFS、短作业优先SJF和时间片RR算法的调度过程。假设有n个进程分别在T1, … ,Tn时刻到达系统&#xff0c;它们需要的服务时间分别为S1, … ,Sn。如果选择RR算法&#xff0c;还需要指定时间片大小q。分别采用三种进程调度算法进行调度…
阅读更多...
Java EE|多线程之线程状态与线程安全

Java EE|多线程之线程状态与线程安全

文章目录一、线程状态线程状态分类线程各状态剖析线程状态的转移二、线程安全线程不安全举例线程安全概念线程不安全的原因剖析Java标准库中的线程安全类与不安全类线程不安全问题的规避方案一&#xff1a;加监视锁方案二&#xff1a;加volatile关键字方案三&#xff1a;使用wa…
阅读更多...
Mybatis框架，以 paramDTO对象集合形式进行批量查询。

Mybatis框架，以 paramDTO对象集合形式进行批量查询。

在日常工作中&#xff0c;我们时常遇到数据库表中以 (name code) 为唯一索引&#xff0c; 在数据查询时需要根据这一组条件查询出表中唯一1条数据。 有时&#xff0c;我们的入参是 List<DTO> &#xff0c;需要进行批量查询数据。那么可以使用以下的SQL来进行数据的查询…
阅读更多...
崔宝秋国际开源经验在小米开花 | 开源英雄

崔宝秋国际开源经验在小米开花 | 开源英雄

【编者按】崔宝秋的开源人生&#xff0c;来源于内心的真正热爱&#xff0c;和一路的升级打怪。从少时与计算机结缘到成为自由软件信徒&#xff0c;从IBM、雅虎、LinkedIn 到小米这一路走来&#xff0c;从一个开源的追随者成长为开源的推动者&#xff0c;小米的开源文化、丰硕的…
阅读更多...
kettle工具连接elasticsearch 7并导入MySQL表数据-简述

kettle工具连接elasticsearch 7并导入MySQL表数据-简述

一、简述 工作中需要利用kettle开源ETL工具将MySQL数据库中表数据同步到elasticsearch集群中。为此特记录一下操作方式&#xff0c;留作记录和学习。 二、环境 kettle工具&#xff1a;kettle 9.2 elasticsearch集群&#xff1a;7.11.1 集群配置信息&#xff1a; 集群名称&…
阅读更多...
Linux-终端命令行

Linux-终端命令行

终端(Terminal)命令行仅仅是一个工具&#xff0c;对于命令有许多&#xff0c;而且随着嵌入式领域不断开发&#xff0c;命令会越来越多&#xff0c;我们只需要去了解常用的即可。 对于创建或删除一个文件夹&#xff0c;清理终端&#xff0c;下载文件等等都可以在终端命令行输入…
阅读更多...
Nginx 进阶篇

Nginx 进阶篇

文章目录Nginx 进阶篇五、 服务配置1、 配置成系统服务2、 配置环境变量六、 部署静态资源1、 概述2、 配置指令2.1 listen2.2 server_name2.3 location2.4 root2.5 alias2.6 index2.7 error_page3、 静态资源优化配置语法4、 静态资源压缩模块4.1 Gzip 模块配置指令4.2 配置实…
阅读更多...
《Linux运维实战：Centos7.6基于ansible一键离线部署redis6.2.8容器版之哨兵集群》

《Linux运维实战：Centos7.6基于ansible一键离线部署redis6.2.8容器版之哨兵集群》

一、部署背景 由于业务系统的特殊性&#xff0c;我们需要针对不同的客户环境部署redis 哨兵集群&#xff0c;由于大都数用户都是专网环境&#xff0c;无法使用外网&#xff0c;为了更便捷&#xff0c;高效的部署&#xff0c;针对业务系统的特性&#xff0c;我这边编写了基于ans…
阅读更多...
唤醒手腕 Go 语言开发学习笔记（基本简介、环境安装）

唤醒手腕 Go 语言开发学习笔记（基本简介、环境安装）

1. Go语言简介 Go&#xff08;又称 Golang&#xff09;是 Google 的 Robert Griesemer&#xff0c;Rob Pike 及 Ken Thompson 开发的一种静态强类型、编译型语言。Go 语言语法与 C 相近&#xff0c;但功能上有&#xff1a;内存安全&#xff0c;GC&#xff08;垃圾回收&#xf…
阅读更多...
Java中String类的常见问题

Java中String类的常见问题

目录 Q1&#xff1a;为什么String类要定义成不可变类型&#xff1f; 方便String对象缓存HashCode值 字符串常量池的需要 衍生问题&#xff1a;String str new String("hello world") 创建了几个对象&#xff1f; 为了保障程序的安全性 Q2&#xff1a;String的…
阅读更多...
2022年深度学习在时间序列预测和分类中的研究进展综述

2022年深度学习在时间序列预测和分类中的研究进展综述

时间序列预测的transformers的衰落和时间序列嵌入方法的兴起&#xff0c;还有异常检测、分类也取得了进步 2022年整个领域在几个不同的方面取得了进展&#xff0c;本文将尝试介绍一些在过去一年左右的时间里出现的更有前景和关键的论文&#xff0c;以及Flow Forecast [FF]预测…
阅读更多...
解决Windows莫名其妙地从休眠状态唤醒的问题

解决Windows莫名其妙地从休眠状态唤醒的问题

因为经常写代码开很多个工作区&#xff0c;电脑经常就是合盖休眠&#xff0c;这样打开就能用&#xff0c;但是总是在我不经意的时候发现电脑风扇在狂转&#xff0c;不知道是哪个应用又在qj我的电源管理计划&#xff0c;今天午休发现电脑风扇狂转&#xff0c;打开发现是windows系…
阅读更多...
c语言操作符(下)

c语言操作符(下)

前言 &#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;推荐专栏: &#x1f354;&#x1f35f;&#x1f32f; c语言初阶 &#x1f511;个人信条: &#x1f335;知行合一 &#x1f349;本篇简介:>: 讲解c语言中有关操作符的知识. 金句分享: ✨✨✨行程…
阅读更多...
我用python写了个小病毒，老板再也不敢扣我工资啦

我用python写了个小病毒，老板再也不敢扣我工资啦

名字&#xff1a;阿玥的小东东 学习&#xff1a;python正在学习c 主页&#xff1a;阿玥的小东东 今天做个什么呢&#xff0c;我的好朋友提议做一个关机的代码吧&#xff0c;我这一想&#xff0c;对吼&#xff0c;我以前还做过一个关机代码呢&#xff0c;于是乎&#xff0c;今天…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023