Webpack 基本使用 - 1

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: '/'
    }
};

// 上面的 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']
	}
};

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

计量属性和会计报表

计量属性和会计报表

目录 历史成本计价基础的优点重置成本计价可变现净值计价现值公允价值会计报表 \quad \quad 会计要素的计量属性简单的来说就是用什么样的方法来进行计量。 \quad \quad 历史成本计价基础的优点 (比如用发票) 1、数据客观 2、随时可以查证 3、防止随意更改 4、核算手续简化 历…
阅读更多...
Python学习从0到1 day7 Python判断语句

Python学习从0到1 day7 Python判断语句

路远殊途&#xff0c;祝你得偿所愿 ——24.1.21 前言 进行逻辑判断&#xff0c;是生活中常见的行为&#xff0c;同样&#xff0c;在程序中&#xff0c;进行逻辑判断也是最为基础的功能 一、布尔类型和比较运算符 1.布尔类型 进行判断&#xff0c;有两个结果&#xff0c;True、…
阅读更多...
C# 获取QQ会话聊天信息

C# 获取QQ会话聊天信息

目录 利用UIAutomation获取QQ会话聊天信息 效果 代码 目前遇到一个问题 其他解决办法 利用UIAutomation获取QQ会话聊天信息 效果 代码 AutomationElement window AutomationElement.FromHandle(get.WindowHwnd); AutomationElement QQMsgList window.FindFirst(Tr…
阅读更多...
【leetcode】移除元素

【leetcode】移除元素

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家刷题&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 一.暴力求解法二.使用额外数组三.原地修改数组 点击查看题目 一.暴力求解法 若我们不考虑时间复杂度…
阅读更多...
python进程间通信——命名管道（Named Pipe、FIFO）

python进程间通信——命名管道（Named Pipe、FIFO）

文章目录 Python中的命名管道&#xff1a;深入理解进程间通信1. 命名管道简介2. 创建和删除命名管道3. 写入命名管道4. 读取命名管道5. 示例&#xff1a;进程间通信write_to_pipe.pyread_from_pipe.py测试运行 6. 注意事项和限制命名管道的半双工机制命名管道读写任意一方未打开…
阅读更多...
防范水坑攻击：了解原理、类型与措施

防范水坑攻击：了解原理、类型与措施

水坑攻击是一种常见的网络攻击方式&#xff0c;它利用了人类在互联网上的行为习惯&#xff0c;诱导用户访问恶意网站或下载恶意软件&#xff0c;从而获取用户的个人信息或控制用户的计算机系统。本文将介绍水坑攻击的原理、类型和防范措施。 一、水坑攻击的原理 水坑攻击&…
阅读更多...
Pytest 结合 Allure 生成测试报告

Pytest 结合 Allure 生成测试报告

测试报告在项目中是至关重要的角色&#xff0c;一个好的测试报告&#xff1a; 可以体现测试人员的工作量&#xff1b; 开发人员可以从测试报告中了解缺陷的情况&#xff1b; 测试经理可以从测试报告中看到测试人员的执行情况及测试用例的覆盖率&#xff1b; 项目负责人可以通过…
阅读更多...
2023年前前同事12个月薪水未发，来聊聊普通的开发人如何避开丛丛杀机的新一年

2023年前前同事12个月薪水未发，来聊聊普通的开发人如何避开丛丛杀机的新一年

转眼又一年&#xff0c;2024已经快走完了十二分之一。 回顾2023&#xff0c;整个程序员行业关键词总结为&#xff1a;跳槽&#xff0c;加班&#xff0c;裁员&#xff0c;失业&#xff0c;欠薪。 前几年互联网的火爆随着这几年疫情&#xff0c;国际社会动荡&#xff0c;国内外经…
阅读更多...
Java设计模式详解-更新中

Java设计模式详解-更新中

收藏和关注的同时&#xff0c;请也关注 公众号 “IT技术馆” 各位大家好&#xff0c;从今天开始&#xff0c;作者开始整理 《JAVA软件设计模式&#xff08;GOF&#xff09;》 专栏。请各位多多关注&#xff01; 该专栏是根据作者的技术经验和设计模式的了解&#xff0c;进行详…
阅读更多...
Docker-Confluence部署记录

Docker-Confluence部署记录

启动 docker container run -v $(pwd):/var/atlassian/application-data/confluence/ --nethost -d --nameconfluence_720_20240120 confluence/confluence:7.2.0新建mysql数据库 导入破解包 atlassian-agent 参考-Confluence 破解方式&#xff08;Linux&#xff09; 按流程破…
阅读更多...
idea消除代码区黄色警告

idea消除代码区黄色警告

文章目录 前言一、修改配置总结 前言 idea的检查项较多&#xff0c;导致警告比较多看上去很不雅观。 一、修改配置 在idea中打开Settings 取消Warning和Weak Warning的勾选 总结 回到顶部
阅读更多...
【Python学习】Python学习21- 正则表达式（1）

【Python学习】Python学习21- 正则表达式（1）

目录 【Python学习】Python学习21- 正则表达式&#xff08;1&#xff09; 前言re.match函数实例 re.search方法re.match与re.search的区别参考 文章所属专区 Python学习 前言 本章节主要说明Python的正则表达式。 正则表达式是一个特殊的字符序列&#xff0c;它能帮助你方便的…
阅读更多...
uniCloud uni-id体系的使用

uniCloud uni-id体系的使用

目录 简介 uni-id导入和配置 用户表与文章表关联foreignKey 字段级权限控制 指定数据集权限控制 权限规则的变量和运算符 简介 uni-id已完成的功能&#xff1a; 注册、登录、发送短信验证码、密码加密保存、修改密码、忘记密码、头像管理、token管理、rbac权限角色体系、…
阅读更多...
04 单链表

04 单链表

目录 链表的概念和结构单链表OJ练习 1. 链表的概念和结构 1.1 链表的概念 链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的 1.从上图可以看出链式结构在逻辑上是连续的&#xff0c;物理上不一定连续 2.现…
阅读更多...
提升网站关键词排名的工具

提升网站关键词排名的工具

随着互联网的蓬勃发展&#xff0c;网站的关键词排名成为衡量网站流量和曝光度的重要指标。在这个竞争激烈的数字时代&#xff0c;站在搜索引擎结果的前列变得至关重要。为了实现这一目标&#xff0c;合理利用关键词排名优化工具是必不可少的。本文将重点介绍147SEO软件&#xf…
阅读更多...
数据库入门:快速了解数据库

数据库入门:快速了解数据库

目录 序言 一、什么是数据库&#xff1f; 二、DBMS 数据库管理系统&#xff08;DataBase Management System&#xff09; 三、数据库与文件系统的区别 四、数据库的发展和规划 五、常见数据库 5.1 关系型数据库 5.2 非关系型数据库 六、DBMS支持的数据模型 6.1 层次模…
阅读更多...
2024年【河北省安全员B证】最新解析及河北省安全员B证试题及解析

2024年【河北省安全员B证】最新解析及河北省安全员B证试题及解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 河北省安全员B证最新解析是安全生产模拟考试一点通生成的&#xff0c;河北省安全员B证证模拟考试题库是根据河北省安全员B证最新版教材汇编出河北省安全员B证仿真模拟考试。2024年【河北省安全员B证】最新解析及河北省…
阅读更多...
C++入门学习（八）sizeof关键字

C++入门学习（八）sizeof关键字

sizeof 是 C 和 C 中的一个运算符&#xff0c;用于确定特定类型或对象的内存大小&#xff08;以字节为单位&#xff09;。 1、查看数据类型占据内存大小 #include <iostream> using namespace std; int main() {short a 1;int b 1;long c 1;long long d 1;cout<…
阅读更多...
跨部门算法迭代需求，从提出到上线的全流程实践

跨部门算法迭代需求，从提出到上线的全流程实践

文章目录 引言需求评审技术方案评审模块开发系统联调QA测试产品验收经验教训 引言 最近工作中有一个算法迭代的需求&#xff0c;我在其中作为技术侧负责人&#xff08;技术主R&#xff09;推动需求完成上线。 需求涉及多个部门&#xff0c;前后耗时接近1个月。 我第一次在这…
阅读更多...
Spring-简介

Spring-简介

在向读者描述Spring时&#xff0c;笔者不打算从某处粘贴一段常见的概念性文字糊弄完本专栏的第一篇文章&#xff0c;而是用易于理解的话向读者指出几个重点。 &#xff08;1&#xff09;是框架。何谓框架&#xff1f;就像搭房子一样&#xff0c;框架就如同是墙体结构&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023