Webpack安装以及快速入门

3 Webpack

1 什么是Webpack

https://webpack.js.org/ (官网)

webpack 是一个现代 javascript 应用程序的 静态模块打包器 (module bundler)

待会要学的 vue-cli 脚手架环境, 集成了 webpack, 所以才能对各类文件进行打包处理

在这里插入图片描述

webpack是一个 静态模块 打包器,可以做以下的这些工作

  1. 语法转换(主要是浏览器兼容)

    • less/sass转换成css
    • ES6转换成ES5
    • …

  2. html/css/js 代码压缩合并 (打包)

  3. webpack可以在开发期间提供一个开发服务器

可以把它看成maven中工程自动化那部分(jar) ,前端项目也是先打包再上线

2 Webpack安装

全局安装

cnpm install webpack@4.41.5 -g
cnpm install webpack-cli@3.3.12 -g

安装后查看版本号

webpack -v
webpack-cli -v

3 快速入门 (js打包)

方式一：webpack原始方式

（1）新建文件夹 work3，在创建src文件夹，创建 bar.js

exports.info=function(str){document.write(str);
}

（2）src下创建logic.js

exports.add=function(a,b){return a+b;
}

（3）src下创建main.js

var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));

说明：上述具有多个js文件，那么我们在实际开发中使用的时候会导入过多的js文件，使用起来不方便，那么我们可以将上述多个js文件打包成一个js文件。

（4）创建配置文件webpack.config.js ，该文件与src处于同级目录

var path = require("path"); // 导入 node.js 中专门操作路径的模块，固定写法
//执行webpack命令的时候会读取到module.exports中的内容
module.exports = {//执行webpack命令的时候,读取入口main.js，由于main.js关联bar.js和logic.js，所以会将这三个js文件合并到一个js文件中entry: './src/main.js', // 打包入口文件的路径//输出文件位置output: {//__dirname表示当前工程目录path: path.resolve(__dirname, './dist'),  // 输出文件的存放路径filename: 'bundle.js'  // 输出文件的名称}
};

以上代码的意思是：读取当前目录下src文件夹中的main.js（入口文件）内容，把对应的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

webpack 的 4.x 版本中默认约定：

  • 打包的入口文件为 src -> main.js
  • 打包的输出文件为 dist -> index.js

（5）执行编译命令

webpack

执行后查看bundle.js 会发现里面包含了上面两个js文件的内容

（6）创建index.html ,引用bundle.js

<!doctype html>
<html><head>  </head><body>   <script src="dist/bundle.js"></script></body>
</html>`

创建完毕,完整目录如下

在这里插入图片描述

测试调用index.html，会发现有内容输出：Hello world!300

方式二：基于NPM方式

  1. 新建项目空白目录，并运行npm init –y 命令，初始化包管理配置文件package.json

    -y 可以直接跳过配置

    在这里插入图片描述

  2. 新建 src 源代码目录,并且把 bar.js 和 logic.js 和 main.js 文件复制到 src目录

  3. 创建index.html ,引用bundle.js

    <!doctype html>
<html><head>  </head><body>   <script src="dist/bundle.js"></script></body>
</html>

  4. 运行 npm install webpack webpack-cli 命令，安装webpack相关的包

    如果全局安装过webpack 和 webpack-cli工具, 此步骤可跳过

  5. 在项目根目录中，创建名为webpack.config.js 的 webpack配置文件同上

    var path = require("path");
module.exports = {mode: 'development', // mode 用来指定构建模式development、productionentry: './src/main.js',output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'}
};

    mode: ‘development’ //mode 用来指定构建模式、production：生产模式（压缩）

  6. 在 package.json 配置文件中的scripts节点下，新增dev脚本如下：

    {"name": "work4","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack"  //script 节点下的脚本，可以通过 npm run 执行},"keywords": [],"author": "","license": "ISC"
}

    完整代码结构：

    在这里插入图片描述

    在终端中运行 npm run dev 命令，启动webpack进行项目打包。

    在这里插入图片描述

    注意是在package.json 包下运行该命令

    点击index.html文件查看结果, 会发现有内容输出：`Hello world!300

    说明：使用npm命令运行的原因是后期使用webpack命令的时候，命令会很多，不仅仅只有webpack几个字母，不好记，而使用：npm run dev命令执行无论webpack命令有多少都会执行。

4 webpack-dev-server 开发服务器

4.1 介绍

修改main.js代码如下：

在这里插入图片描述

需要每次在修改源码之前需要重新打包：

在这里插入图片描述

每次修改代码, 都需要重新打包, 才能看到最新的效果, 且实际工作中, 打包非常费时 (30s - 60s) 之间

为什么费时?

  1. 构建依赖
  2. 读取对应的文件, 才能加载
  3. 用对应的 loader 进行处理
  4. 将处理完的内容, 写入到 dist 目录

简而言之就是我们希望修改源码完毕之后，不用再每次重新打包，运行的结果直接是修改后的结果。

解决方案：我们可以开启一个开发服务器webpack-dev-server, 在电脑内存中打包, 缓存一些已经打包过的内容, 只重新打包修改的文件 (热更新)

4.2 使用

如果模块(work3)下，没有package.json 文件，那么需要在模块下初始化命令：npm init即可

  1. 修改 package.json -> scripts 中的 dev, dependencies, devDependencies如下：

    devDependencies这是开发时依赖, 上线不依赖

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

然后运行 cnpm install 指令,安装webpack,webpack-cli 和 webpack-dev-server

  1. 修改 webpack.config.js 文件,添加 devServer
var path = require("path");
module.exports = {mode: 'development', // mode 用来指定构建模式development、productionentry: './src/main.js',devServer: {port: 8099,// 服务器占用8099端口open: true  // 自动打开浏览器},output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'}
};

  1. 删除之前的dist目录

  2. 将 index.html 中，script 脚本的引用路径

    <!doctype html>
<html><head>  </head><body>   <!-- 内存中读取 --><script src="/bundle.js"></script></body>
</html>

  3. 运行 npm run dev 命令

  4. 在浏览器中访问 http://localhost:8099地址，查看自动打包效果

webpack-dev-server 会启动一个实时打包的 http 服务器

webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，基于内存

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

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

相关文章

计算机的错误计算（二十四）

计算机的错误计算（二十四）

摘要 计算机的错误计算&#xff08;二十一&#xff09;就案例 展示了“两个不相等数相减&#xff0c;差为0”。本节给出新的计算过程&#xff1a;不停增加计算精度直到出现非0结果。这个过程与结果表明&#xff0c;即使是专业数学软件&#xff0c;对这个问题的处理&#xff0…
阅读更多...
【ffmpeg系列一】源码构建，ubuntu22与win10下的过程对比。

【ffmpeg系列一】源码构建，ubuntu22与win10下的过程对比。

文章目录 背景ubuntu22结论 win10过程 对比结论 背景 顺手编译个ffmpeg试试&#xff0c;看看不同平台下谁的配置比较繁琐。 先让gpt给出个教程&#xff1a; ubuntu22 使用elementary-os7.1构建&#xff0c;看看有几个坑要踩。 错误1&#xff1a; 依赖libavresample-dev未…
阅读更多...
【人工智能】-- 智能家居

【人工智能】-- 智能家居

个人主页&#xff1a;欢迎来到 Papicatch的博客 课设专栏 &#xff1a;学生成绩管理系统 专业知识专栏&#xff1a; 专业知识 文章目录 &#x1f349;引言 &#x1f349;基于深度卷积神经网络的表情识别 &#x1f348;流程图 &#x1f348;模型设计 &#x1f34d;网络架…
阅读更多...
[图解]企业应用架构模式2024新译本讲解24-标识映射3

[图解]企业应用架构模式2024新译本讲解24-标识映射3

1 00:00:00,460 --> 00:00:02,580 超类定义了一个抽象方法 2 00:00:03,170 --> 00:00:03,450 3 00:00:06,410 --> 00:00:09,690 把reader内容 4 00:00:10,870 --> 00:00:12,350 把它变成一个领域对象 5 00:00:13,690 --> 00:00:15,800 但这里只是把它变成一个…
阅读更多...
python安装PyTorch+cuda

python安装PyTorch+cuda

1,最终结果 import torchprint(torch.cuda.is_available()) #显示True&#xff0c;则安装成功 print(torch.__version__)#打印当前PyTorch版本号。 print(torch.version.cuda)#打印当前CUDA版本号。 print(torch.backends.cudnn.version())# 打印当前cuDNN版本号。 print(torc…
阅读更多...
【爱上C++】vector用法详解

【爱上C++】vector用法详解

文章目录 一:vector简介二:vector的创建和初始化三:vector的遍历1.[]下标2.at()3.迭代器遍历4.范围for 四:vector的空间1.size2.max_size3.capacity4.reserve5.resize6.empty 五:vector的增删查改1.push_back2.pop_back3.find4.insert5.erase6.swap7.assign Hello~同学们好&…
阅读更多...
docker nginx mysql redis

docker nginx mysql redis

启动没有数据卷的nginx docker run -d -p 86:80 --name my-nginx nginx把/etc/nginx中的配置复制到宿主机 docker cp my-nginx:/etc/nginx /home/nginxlkl把/html 中的文件复制到宿主机 docker cp my-nginx:/etc/nginx /home/nginxlkl删除当前镜像 docker rm -f my-nginx重新起…
阅读更多...
HarmonyOS ArkUi 字符串＜展开/收起＞功能

HarmonyOS ArkUi 字符串＜展开/收起＞功能

效果图&#xff1a; 官方API&#xff1a; ohos.measure (文本计算) 方式一 measure.measureTextSize 跟方式二使用一样&#xff0c;只是API调用不同&#xff0c;可仔细查看官网方式二 API 12 Preview Component export struct CustomTextSpan {State maxLines: number 1/…
阅读更多...
迭代器模式(大话设计模式)C/C++版本

迭代器模式(大话设计模式)C/C++版本

迭代器模式 C #include <iostream> #include <string> #include <vector>using namespace std;// 迭代抽象类,用于定义得到开始对象、得到下一个对象、判断是否到结尾、当前对象等抽象方法&#xff0c;统一接口 class Iterator { public:Iterator(){};virtu…
阅读更多...
作为产品经理，如何用大模型给我们赋能？非常详细，收藏我这篇就够了

作为产品经理，如何用大模型给我们赋能？非常详细，收藏我这篇就够了

作为一名产品经理&#xff0c;如果您考虑转行至大模型领域&#xff0c;您将能够将产品管理技能与大模型技术相结合&#xff0c;从而在产品开发和创新方面获得一系列好处。以下是转行大模型对产品经理的一些潜在益处&#xff1a; 更深入的技术理解&#xff1a;了解大模型技术将…
阅读更多...
使用 Python 处理 Lumerical 导出的 .txt 文件（完结）

使用 Python 处理 Lumerical 导出的 .txt 文件（完结）

使用 Python 处理 Lumerical 导出的 .txt 文件 引言正文以 , 隔开的波长与透射率以 \t 隔开的波长与透射率引言 之前在 添加链接描述 一文中我们已经介绍了如何将 Lumerical 仿真中的 S 参数相关数据导出为 .txt 文件。这里我们来分享如何使用 Python 对这些数据进行处理。 正…
阅读更多...
如果国产BI工具也有顶流，它们一定会上榜

如果国产BI工具也有顶流，它们一定会上榜

在数据驱动的今天&#xff0c;商业智能&#xff08;BI&#xff09;工具已成为企业不可或缺的助手&#xff0c;它们通过强大的数据处理和分析能力&#xff0c;帮助企业洞察市场趋势&#xff0c;优化运营决策。如果BI工具界也有“顶流”&#xff0c;那么奥威BI、帆软BI&#xff0…
阅读更多...
我国甜菜碱行业规模较大 未来行业发展前景较好

我国甜菜碱行业规模较大 未来行业发展前景较好

我国甜菜碱行业规模较大 未来行业发展前景较好 甜菜碱化学名称三甲基甘氨酸&#xff0c;是一种在动植物体内广泛存在的季铵型生物碱。它具有多种生物学功能&#xff0c;包括渗透调节、甲基供体等&#xff0c;广泛应用于饲料、食品、医药和化妆品等行业。甜菜碱的提取主要来源于…
阅读更多...
揭秘SmartEDA：电路仿真软件如何贯穿课前课中课后，助力电子学习新纪元！

揭秘SmartEDA：电路仿真软件如何贯穿课前课中课后，助力电子学习新纪元！

在电子设计与自动化的学习道路上&#xff0c;一款强大的电路仿真软件往往能为学生们带来事半功倍的效果。今天&#xff0c;我们就来深入探讨一下SmartEDA这款电路仿真软件在课前、课中、课后的全方位应用&#xff0c;看看它如何助力我们的电子学习步入新纪元&#xff01; 1、课…
阅读更多...
直播平台集成美颜工具详解：视频美颜SDK开发指南

直播平台集成美颜工具详解：视频美颜SDK开发指南

本篇文章&#xff0c;小编将详细介绍如何在直播平台中集成美颜工具&#xff0c;帮助开发者更好地理解视频美颜SDK的开发过程。 一、美颜工具的作用和原理 1.1 美颜工具的作用 美颜工具主要用于提升直播视频的画面质量&#xff0c;让主播和观众在镜头前看起来更加美观。这些功…
阅读更多...
2024年最新ComfyUI汉化及manager插件安装详解！

2024年最新ComfyUI汉化及manager插件安装详解！

前言 在ComfyUI文生图详解中&#xff0c;学习过如果想要安装相应的模型&#xff0c;需要到模型资源网站&#xff08;抱抱脸、C站、魔塔、哩布等&#xff09;下载想要的模型&#xff0c;手动安装到ComfyUI安装目录下对应的目录中。 为了简化这个流程&#xff0c;我们需要安装Co…
阅读更多...
MacOS下更新curl

MacOS下更新curl

苹果自带的curl不支持Https&#xff0c;我们可以通过curl -V看到如下结果 curl 7.72.0 (x86_64-apple-darwin18.6.0) libcurl/7.72.0 zlib/1.2.12 libidn2/2.3.7 librtmp/2.3 Release-Date: 2020-08-19 Protocols: dict file ftp gopher http imap ldap ldaps pop3 rtmp rtsp …
阅读更多...
Java数据结构9-排序

Java数据结构9-排序

1. 排序的概念及引用 1.1 排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录…
阅读更多...
认证资讯|Bluetooth SIG认证

认证资讯|Bluetooth SIG认证

在当今高度互联的世界中&#xff0c;无线技术的普及已经成为我们生活和工作中不可或缺的一部分。作为领先的无线通信技术之一&#xff0c;Bluetooth技术以其稳定性、便捷性和广泛的应用场景而备受青睐。然而&#xff0c;要想在激烈的市场竞争中脱颖而出&#xff0c;获得Bluetoo…
阅读更多...
6、Redis系统-数据结构-04-Hash

6、Redis系统-数据结构-04-Hash

四、哈希表&#xff08;Hashtable&#xff09; 哈希表是一种高效的键值对数据结构&#xff0c;通过散列函数将键映射到表中的位置&#xff0c;实现快速的插入、删除和查找操作。Redis 广泛使用哈希表来实现 Hash 对象和数据库的键值存储。以下将从结构设计、哈希冲突与链式哈希…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023