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，一经查实，立即删除！

相关文章

Spring Boot (9)：AOP实战经验

Spring Boot (9)：AOP实战经验

1 概述 介绍完Spring AOP所具备的功能特性&#xff0c;接下来&#xff0c;看一下再应用程序中使用AOP时应该遵循哪些最佳实践。 2 活用切点表达式 Spring AOP的一大特色在于在开发人员提供了非常灵活的切点机制。Spring在编译期间处理切入点&#xff0c;并尝试进行优化匹配。然…
阅读更多...
计算机的错误计算（二十四）

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

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

1 HTML and CSS

HTMl(超文本标记语言) HTML 概述 超文本标记语言用来描述和定义网页的内容 HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦;它定义了网页内容的含义和结构 “超文本”(hypertext)是指连接单个网站内或多个网站间的网页的链接 1. HTML标签功能区分…
阅读更多...
Qt之多线程编程(QThread)

Qt之多线程编程(QThread)

文章目录 前言Qt多线程的基本使用如何移动线程常用的一些函数示例代码总结 前言 在现代计算机系统中&#xff0c;多线程编程已经成为一种常见的编程模式&#xff0c;它可以有效地利用多核处理器的计算能力&#xff0c;提高程序的执行效率。Qt作为一种跨平台的应用程序开发框架…
阅读更多...
【ffmpeg系列一】源码构建，ubuntu22与win10下的过程对比。

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

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

Linux-学习-05-openssl安装与卸载

目录 一、环境信息 二、卸载步骤 1、使用包管理器卸载 三、安装步骤 1、下载OpenSSL源代码 2、解压并进入目录 3、配置、编译和安装 4、更新软链接 5、更新共享库缓存 6、/etc/profile添加环境变量 7、环境变量生效 8、openSSL版本验证 一、环境信息 名称值CPUInte…
阅读更多...
【人工智能】-- 智能家居

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

个人主页&#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…
阅读更多...
Ruby 语法

Ruby 语法

Ruby 语法 Ruby 是一种动态、开放源代码的编程语言，由日本的松本行弘（Yukihiro Matsumoto）于1995年开发。Ruby 的设计哲学强调简洁和效率，同时也是一种表达力强的语言。它结合了多种编程语言的特性，包括 Perl、Smalltalk、Eiffel、Ada 和 Lisp。Ruby 的语法简单直观，使得…
阅读更多...
【爱上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~同学们好&…
阅读更多...
mAP（平均精度均值）全面解读：评估目标检测性能的黄金标准

mAP（平均精度均值）全面解读：评估目标检测性能的黄金标准

mAP&#xff08;平均精度均值&#xff09;全面解读&#xff1a;评估目标检测性能的黄金标准 在目标检测领域&#xff0c;评估模型性能是至关重要的一步。mAP&#xff08;mean Average Precision&#xff0c;平均精度均值&#xff09;作为目标检测任务中一个关键的性能评估指标…
阅读更多...
搭建纯净的SpringBoot工程

搭建纯净的SpringBoot工程

pom文件 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVe…
阅读更多...
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重新起…
阅读更多...
ArrayList,Vector, LinkedList的存储性能和特性举例说明

ArrayList,Vector, LinkedList的存储性能和特性举例说明

ArrayList、Vector、LinkedList是Java中常用的三种集合类型&#xff0c;它们各自具有不同的存储性能和特性。下面将分别举例说明这三种集合的存储性能和特性&#xff1a; ArrayList 存储性能与特性&#xff1a; 底层实现&#xff1a;ArrayList底层是通过数组实现的&#xff…
阅读更多...
Solidity：变量数据存储和作用域 storage/memory/calldata

Solidity：变量数据存储和作用域 storage/memory/calldata

Solidity中的引用类型​ 引用类型(Reference Type)&#xff1a;包括数组&#xff08;array&#xff09;和结构体&#xff08;struct&#xff09;&#xff0c;由于这类变量比较复杂&#xff0c;占用存储空间大&#xff0c;我们在使用时必须要声明数据存储的位置。 数据位置​ …
阅读更多...
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;了解大模型技术将…
阅读更多...
LeetCode 1351, 1, 208

LeetCode 1351, 1, 208

目录 1351. 统计有序矩阵中的负数题目链接标签简答二分查找思路代码 优化思路代码 1. 两数之和题目链接标签思路代码 208. 实现 Trie (前缀树)题目链接标签思路代码 1351. 统计有序矩阵中的负数 题目链接 1351. 统计有序矩阵中的负数 标签 数组 二分查找 矩阵 简答二分查找…
阅读更多...
最新文章

Copyright @ 2022~2023