Webpack5 基本使用 - 1

news2024/11/16 6:58:53

Webpack 是什么

webpack 的核心目的是打包，即把源代码一个一个的 js 文件，打包汇总为一个总文件 bundle.js。
基本配置包括mode指定打包模式，entry指定打包入口，output指定打包输出目录。
另外，由于 webpack默认只能打包js文件，如果需要打包其他类型的文件，就需要配置loader。
plugins 用于配置插件，插件可用于执行更广泛的任务，包括打包优化和压缩、或者重新定义环境中的变量。

webpack 和 vite 的区别

Vite是一个轻量的、快速的构建工具。核心是由于浏览器支持 es module，所以在开发环境下避免了打包成 js bunlde，浏览器请求时，按需为浏览器提供es module文件，浏览器获取 ES Module 文件会直接执行，极大的提高了启动速度和热更新速度。

Vite 和 Webpack 的区别：

  • Webpack支持的模块化规范是ES Modules、CommonJS 、 AMD Modules；
  • Webpack在开发环境：通过 webpack-dev-server 托管打包好的模块；
  • Webpack 在生产环境通过Webpack构建。
  • Vite支持的模块化规范是 ES Module；
  • Vite 在开发环境下直接使用ES Module，托管给浏览器去执行；
  • Vite 在生产环境通过rollup构建

基本配置

初始化项目

npm init -y

使用 webpack

  1. 安装 webpack、webpack-cli
yarn add webpack webpack-cli --save
  1. 在项目下新建配置文件 webpack.config.js
  • 默认依据 webpack.config.js 进行打包
  • 如果使用别的名字，需要在通过 --config 指定配置文件
const path = require('path');

module.exports = {
    mode: 'development', // 指定打包模式 development / production
    output: {},
    module: {},
    plugins: []
};
  1. 打包命令
// 默认使用 webpack.config.js
npx webpack

// 指定配置文件
npx webpack --config webpack.dev.js

在这里插入图片描述

webpack 配置

基本五要素

mode
  • 指定打包方式：development / production。
module.exports = {
	mode: 'development' // 开发模式
};

module.exports = {
	mode: 'production' // 生产模式，默认会压缩 js
};
entry
  • 指定打包的入口文件。
单入口
  1. 不配置 entry
  • 默认打包方式是单入口
  • 默认打包入口文件是 /src/index.js
  1. 配置单入口
  • 打包形成一个 chunk，输出一个 bundle 文件
  • 默认打包后的 chunk 名字叫 main.js，想要修改输出文件名称需要在 output 配置
// 单入口：字符串形式
const path = require('path');

module.exports = {
    entry: path.join(__dirname, 'src/index.js') // 指定打包入口文件
};
多入口

配置多入口：对象形式 / 数组形式。

// 例如有两个文件
// /src/index.js
function add(a, b) {
	return a + b;
}

export default add;

// /src/count.js
function count(a, b) {
	return a - b;
}

export default count;
  • 对象形式配置多入口
// 对象形式配置多入口
// 有几个入口文件就形成几个 chunk，输出几个 bundle 文件
// bundle 默认名称是对应的 key
module.exports = {
	entry: {
		index: path.join(__dirname, 'src/index.js'),
		other: path.join(__dirname, 'src/count.js')
	},
	// 指定打包后的代码输出目录
    // output: {
        // filename: 'bundle.[name].[contenthash:8].js',  // [name] 对应 entry 的 key
        // path: path.join(__dirname, 'dist') // 输出的文件目录
    // },
};

在这里插入图片描述

  • 数组形式配置多入口
// 数组形式配置多入口
// 所有文件最终只会形成一个 chunk，输出文件只有一个 bundle 文件
// 会将后面的文件内容打包到第一个文件中，bundle 文件默认名字 main.js
module.exports = {
    entry: [path.join(__dirname, 'src/index.js'), path.join(__dirname, 'src/count.js']
};
// 这时打包后只会输出一个 bundle 文件，会默认将 /src/count.js 打包到 /src/inde.js 中

在这里插入图片描述

// 一般不使用数组形式
// 唯一用处是解决：在开启 HMR 功能后，html 文件的热加载功能失效 的问题

// 开启 HMR 功能后，在 entry 入口添加 html 文件，就能解决 html 文件热加载失效的问题
module.exports = {
	// 注意这里引入了 index.html 后，需要配置 html-loader 才能处理 html 文件
    entry: [path.join(__dirname, 'src/index.js'), path.join(__dirname, 'src/index.html')]
};
output

指定打包后的文件输出目录。

  1. 不配置 output：默认所有打包后的资源都输出到更目录下的 dist 文件夹中
// 默认所有打包后的资源都输出到更目录下的 dist 文件夹中
module.exports = {
	output: {}
};
  1. 配置 output：将打包后的资源都输出到指定目录下
const path = require('path');

// 对象形式
module.exports = {
    output: { 
		// path 配置公共目录，指定所有资源文件的输出目录
		// 如果不配置，默认是输出到 dist 目录
		path: path.resolve(__dirname, '/build'), //  __dirname 是项目根目录的绝对路径
		
		// 指定输出到公共目录下的资源名称（文件名 + 目录）
		// 如果不配置: 默认输出文件名是 main.js, 输出结果是 /build/main.js
		filename: 'js/bundle.js', // 输出为 /build/js/bundle.js
		// filename: 'bundle.[name].js',  // [name] 对应 entry 多入口的 key；
		// filename: 'bundle.[contenthash:8].js',  // 打包代码时加上 hash 戳可以命中缓存
		
		// publicPath: 所有资源引入公共路径的前缀
		// 不配置则 <script src="built.js"></script>
		// 配置则 <script src="/built.js"></script> 会从项目根目录去寻找
		publicPath: '/',
		// 自动清空上次打包的内容
		// 在打包前将 path 整个目录内容清空，再进行打包
		clean:true
    }
};

// 上面的 filename 配置是只输出一个 bundle 文件的情况
// 如果需要输出多个 bundle 文件  这里的 [name] 对应的就是多入口配置的 key
module.exports = {
	entry: {
		build: path.join(__dirname, 'src/index.js'),
		other: path.join(__dirname, 'src/count.js')
	},
    output: { 
		path: path.resolve(__dirname, '/build'),
		filename: 'js/[name].js' // 输出结果 /build/js/build.js 和 /build/js/other.js
    }
};
module

module 里一般用于配置 loader。

loader 是用于帮助 webpack 去处理非 js 文件的，因为 webpack 只能打包js文件。

// module 对象套 rules 数组，在数组中配置 loader
module.exports = {
	module: {
		rules: [
		    // 使用单个loader的写法
			{
				test: /\.js$/, // 需要检测的文件，正则表达式
				loader:  'babel-loader', // loader 名称
				options: { 
					// 给 loader 指定一些特殊配置
				}
			},
			{
				test: /\.js$/,
				// 如果一种文件需要被多个 loader 执行，必须要指定先后执行顺序
				// enforce 指定优先执行 pre
				enforce: 'pre',
				exclude: /node_moduls/,
				loader:  'eslint-loader', // loader 名称
				options: {}
			},
			// 需要使用多个 loader
			{
				test: /\.css$/,
			   // 数组写多个 loader，调用方式是从后往前，先调用的需要写到后面
				use: [ 
					'style-loader',
					{
						loader: 'css-loader',
						options: {
							// 指定特殊配置
						}
					}
				]
			}
			// 其它属性
			{
				test: /\.css$/,
			    // 默认是匹配所有目录
				// include 指定要匹配的目录, 多个就用数组形式
			    include: [/asset/, /global/], 
				// exclude 指定要排除的目录
				// 单个就直接写, 目录都用 // 包裹, 多个就用数组形式
			 	exclude: /mode_modules/,
				use: [
					  'style-loader',
					  'css-loader'
				]
			}
		]
	}
};
plugin

plugins 用于配置插件。

插件可用于执行更广泛的任务，包括打包优化、压缩文件、重新定义环境中的变量。

// 首先将需要的插件引入
const HtmlWebpackPlugin = require('html-webpack-plugin');

// plugins 是数组形式配置
module.exports = {
	plugins: [
		// 调用插件
		new HtmlWebpackPlugin()
	]
};

开发环境配置

devServer

用于开发环境下的配置，可修改端口号，自动打开浏览器，设置代理，开启 HMR，方便开发者的开发工作。

  1. 安装 webpack-dev-server
yarn add webpack webpack-dev-server -D
  1. 配置 devServer
const path = require('path');

module.exports = {
    devServer: {
        port: 3000, // 修改端口号
        progress: true,  // 显示打包的进度条
        contentBase: path.join(__dirname, 'dist'),  // 指定运行代码的目录，输出在内存中，看不到
        open: true,  // 自动打开浏览器
        compress: true,  // 启动 gzip 压缩

        // 设置代理
        proxy: {
            // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
            '/api': 'http://localhost:3000',

            // 将本地 /api2/xxx 代理到 localhost:3000/xxx
            '/api2': {
                target: 'http://localhost:3000',
                pathRewrite: {
                    '/api2': ''
                }
            }
        }
    }
};
配置热更新 HMR
  • 自动刷新：整个网页全部刷新，速度较慢；状态会丢失
  • 热更新：新代码生效，网页不刷新，状态不丢失
// 自动刷新 （一般不需要配置自动刷新）
module.export = {
	watch: true， // 开启监听，默认为false
	// 注意，开启监听之后，webpack-dev-server 会自动开启刷新浏览器
	// 监听配置
	watchOptions: {
		ignored: /node_modules/，// 忽略哪些文件
		// 监听到变化发生后会等 300ms 再去执行动作，防止文件更新太快导致重新编译频率太高 
		aggregateTimeout:300，// 默认为 300MS
		// 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的 
		poll: 1000 // 默认每隔 1000 毫秒询问一次
	}
};

// 开启 HMR
module.export = {
	devServer: {
		hot: true
	}
};
HMR 原理

webpack-dev-server 会创建两个服务：express 服务（提供静态资源） 和 socket 服务（服务器可以主动发送文件到客户端）。

  • express server 负责直接提供静态资源的服务：打包后的资源直接被浏览器请求和解析。
  • HMR Socket Server，是一个 socket 的长连接，建立连接后双方可以通信，服务器可以直接发送文件到客户端。而 http 请求必须要浏览器主动发起请求。

当服务器监听到对应的模块发生变化时，会生成两个文件。 manifest.json 文件记录更新的位置信息等配置信息，update chunk .js 文件记录实际更新的具体内容。通过长连接，可以直接将这两个文件主动发送给浏览器，浏览器拿到两个新的文件后，通过 HMR runtime 机制（webpack 在打包的时候提供），加载这两个文件，并且针对修改的模块进行更新。

resolve

alias

alias 属性配置路径别名。

文件目录隔的比较远就可以用路径别名来代替相对路径。比如存在目录：/src/pages/monitor/container.jsx 和 /src/common/utils/i18n.js。container.jsx文件需要引用 i18n.js 文件，通过以下配置后，引入时就可以缩短路径名称 import xxx from '@utils/i18n.js';

module.exports = {
	resolve: {
		alias: {
			'@utils': path.resolve(__dirname, 'src/common/utils')
		}
	}
};
extentions

extentions 配置省略文件路径后缀名。
配置后在引入该文件的时候，可以不用写后缀名。

module.exports = {
	resolve: {
		// 配置省略文件路径后缀名
		// 默认是省略 .js 和 .json
		extensions: ['.js', '.json', '.jsx']
	}
};
modules

告诉 webpack 解析模块应该去找哪个目录。默认是 node_modules。

module.exports = {
	resolve: {
		// 告诉 webpack 解析模块是去找哪个目录
		// 默认是 node_modules，但是会在目录中一层一层的找，先找 js 当前目录，找不到就往上一层找，直到找到
		modules: 'node_modules'
	}
};

const path = require('path);
	
module.exports = {
	resolve: {
		// 通过 resove 指定去哪一层找
		// 一般后面还要加上 node_modules，如果指定目录找不到，就再一层一层找
		modules: [path.resolve(__dirname, '../../node_modules'), 'node_modules']
	}
};

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

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

相关文章

Python工具：pathlib

Python工具：pathlib

文件的路径实际上是一件很困扰的时间&#xff08;各种平台有时候规则不一样&#xff0c;有时候还需要考虑字符转义的问题&#xff09;&#xff0c;因此我直接推荐使用模块 pathlib&#xff0c;当然&#xff0c;如果您不介意的话&#xff0c;可以使用 os.path 做较为低级的路径操…
阅读更多...
蓝桥杯（Python）每日练Day5

蓝桥杯（Python）每日练Day5

题目 OJ1229 题目分析 题目完全符合栈的特征&#xff0c;后进先出。如果能够熟练使用列表的9种方法那么这道题很容易解出。 题解 a[]#存衣服 nint(input()) for i in range(n):llist(input().split())#判断每一步的操作if len(l[0])2:a.append(l[1])else:while a.pop()!l…
阅读更多...
不停机迁移，TDengine 在 3D 打印技术中的“焕新”之路

不停机迁移，TDengine 在 3D 打印技术中的“焕新”之路

小T导读&#xff1a;自 2021 年我们正式使用 TDengine 至今已接近三年&#xff0c;现在 TDengine 已经成熟应用于我们多个项目当中&#xff0c;凭借着强大的读写存储能力&#xff0c;为我司多项业务的核心数据保驾护航。近期我们团队刚好完成 TDengine 2.x 到 3.x 的数据迁移&a…
阅读更多...
Redisson 分布式锁可重入的原理

Redisson 分布式锁可重入的原理

目录 1. 使用 Redis 实现分布式锁存在的问题 2. Redisson 的分布式锁解决不可重入问题的原理 1. 使用 Redis 实现分布式锁存在的问题 不可重入&#xff1a;同一个线程无法两次 / 多次获取锁举例 method1 执行需要获取锁method2 执行也需要&#xff08;同一把&#xff09;锁如…
阅读更多...
Redis面试

Redis面试

1.说说什么事redis Redis是一种基于键值对的NoSql数据库。 Redis中的value支持string&#xff08;字符串&#xff09;、hahs&#xff08;哈希&#xff09;、list、set、zset&#xff08;有序集合&#xff09;、bitmaps&#xff08;位图&#xff09;&#xff0c;HyperLoglog等数…
阅读更多...
树的学习day01

树的学习day01

树的理解 树是一种递归形式的调用 树是由于多个结点组成的有限集合T 树中有且仅有一个结点称为根 当结点大于1的时候&#xff0c;往往其余的结点为m个互不相交的有限个集合T1,…,Tm&#xff0c;每个互不相交的有限集合本身右是一棵树&#xff0c;称为这个根的子树 空树也是树 关…
阅读更多...
【Web前端开发基础】CSS3之空间转换和动画

【Web前端开发基础】CSS3之空间转换和动画

CSS3之空间转换和动画 目录 CSS3之空间转换和动画一、空间转换1.1 概述1.2 3D转换常用的属性1.3 3D转换&#xff1a;translate3d&#xff08;位移&#xff09;1.4 3D转换&#xff1a;perspective&#xff08;视角&#xff09;1.5 3D转换&#xff1a;rotate3d&#xff08;旋转&a…
阅读更多...
城市开发区视频系统建设方案：打造视频基座、加强图像数据治理

城市开发区视频系统建设方案：打造视频基座、加强图像数据治理

一、背景需求 随着城市建设的步伐日益加快&#xff0c;开发区已经成为了我国工业化、城镇化和对外开放的重要载体。自贸区、开发区和产业园的管理工作自然也变得至关重要。在城市经开区的展览展示馆、进出口商品展示交易中心等地&#xff0c;数千路监控摄像头遍布各角落&#…
阅读更多...
matlab窗函数-hann窗和hamming窗函数

matlab窗函数-hann窗和hamming窗函数

窗函数的作用 在时域上&#xff0c;窗函数可以看作是对原始信号进行截断或调制的加权函数。这些窗函数通常在时域上是有限的宽度&#xff0c;并且具有对称性&#xff0c;如矩形窗、汉宁窗、汉明窗和布莱克曼窗等。例如&#xff0c;汉明窗是一种对称窗函数&#xff0c;它可以用…
阅读更多...
Cuda笔记1

Cuda笔记1

1、培训001 1 1…100&#xff0c;CPU是串行执行&#xff0c;GPU是分成几部分同时计算&#xff0c;如123,456… 2、培训002 一来一回 每种定义有对应的调用位置&#xff0c;和执行位置&#xff0c;不对会报错。 下图是用NVPROF时间分析 下图是资源分析 1&#xff09; CUDA…
阅读更多...
《统计学习方法：李航》笔记 从原理到实现（基于python）-- 第 2章感知机

《统计学习方法：李航》笔记 从原理到实现（基于python）-- 第 2章感知机

文章目录 第 2章感知机2.1 感知机模型2.2 感知机学习策略2.2.1 数据集的线性可分性2.2.2 感知机学习策略 2.3 感知机学习算法2.3.1 感知机学习算法的原始形式2.3.2 算法的收敛性2.3.3 感知机学习算法的对偶形式 实践&#xff1a;二分类模型&#xff08;iris数据集&#xff09;数…
阅读更多...
爬虫正则+bs4+xpath+综合实战详解

爬虫正则+bs4+xpath+综合实战详解

Day3 - 1.数据解析概述_哔哩哔哩_bilibili 聚焦爬虫&#xff1a;爬取页面中指定的页面内容 编码流程&#xff1a;指定url -> 发起请求 -> 获取响应数据 -> 数据解析 -> 持久化存储 数据解析分类&#xff1a;正则、bs4、xpath(本教程的重点) 数据解析原理概述&am…
阅读更多...
2024群硕荣誉首响，第十三届公益节斩获企业大奖

2024群硕荣誉首响，第十三届公益节斩获企业大奖

2024年1月23日至24日&#xff0c;第十三届公益节在北京顺利举行。 历经多年的探索和实践&#xff0c;公益节已经成为中国公益慈善领域颇具影响力的年度盛事。本届公益节全面恢复线下活动&#xff0c;各大企业齐聚现场&#xff0c;展现社会责任的力量&#xff0c;现场气氛热烈而…
阅读更多...
什么是5G RedCap？5G RedCap有什么优势？

什么是5G RedCap？5G RedCap有什么优势？

5G RedCap&#xff08;Reduced Capability&#xff09;是指5G轻量化技术&#xff0c;即通过对5G技术进行一定程度的“功能裁剪”&#xff0c;来降低终端和模组的复杂度、成本、尺寸和功耗等指标&#xff0c;从而“量体裁衣”适配不同的物联需求&#xff0c;实现兼顾物联网系统的…
阅读更多...
【送书活动八期】docker容器中登陆并操作postgresql

【送书活动八期】docker容器中登陆并操作postgresql

这里的背景比较简单&#xff0c;因为区块链浏览器使用的是blockscout&#xff0c;blockscout的数据库选择的是postgresql&#xff0c;这些服务组件都是使用的docker容器来管理&#xff0c;今天进行区块链上交易查询的时候&#xff0c;发现数据存在部分问题&#xff0c;因此需要…
阅读更多...
大数据信用查询系统能查到什么呢?

大数据信用查询系统能查到什么呢?

在金融助贷行业&#xff0c;大数据有叫大数据信用或者网贷大数据&#xff0c;在申贷的时候&#xff0c;想必大多数人都有听说过&#xff0c;很多人因为大数据不良的原因申贷被拒过&#xff0c;那大数据信用查询系统能查到什么呢?本文就简单为大家总结几点大数据信用查询的内容…
阅读更多...
freeRTOS总结（十）消息 队列

freeRTOS总结（十）消息 队列

1&#xff0c;队列简介&#xff08;了解&#xff09; 队列是任务到任务、任务到中断、中断到任务数据交流的一种机制&#xff08;消息传递&#xff09; 与全局变量的区别 类似全局变量&#xff1f;假设有一个全局变量a 0&#xff0c;现有两个任务都在写这个变量a 假如 当任务…
阅读更多...
三层架构-pc通外网小实验

三层架构-pc通外网小实验

要求:pc端能上外网(isp) 效果图:pc1(VLAN2)和pc3(vlan3)都能ping通2.2.2.2(R2环回) 代码:#先配置好r1,r2,端口ip # [R1] ip route-static 0.0.0.0 0.0.0.0 10.1.1.2 acl 2000 rule permit source any interface GigabitEthernet0/0/2 nat outbound 2000 …
阅读更多...
Android消息推送 SSE（Server-Sent Events）方案实践

Android消息推送 SSE（Server-Sent Events）方案实践

转载请注明出处&#xff1a;https://blog.csdn.net/kong_gu_you_lan/article/details/135777170 本文出自 容华谢后的博客 0.写在前面 最近公司项目用到了消息推送功能&#xff0c;在技术选型的时候想要找一个轻量级的方案&#xff0c;偶然看到一篇文章讲ChatGPT的对话机制是基…
阅读更多...
Bank_Code_FullName_2020.06.16.xlsx

Bank_Code_FullName_2020.06.16.xlsx

Bank_Code_FullName_2020.06.16.xlsx 银行联行号和全称 https://download.csdn.net/download/spencer_tseng/88780566 144692条记录&#xff0c;没法子贴上去
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023