Webpack5 基本使用 - 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 / productionoutput: {},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.jsfilename: '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 指定优先执行 preenforce: '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 和 .jsonextensions: ['.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.rhkb.cn/news/244751.html

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

相关文章

kali安装LAMP和DVWA

kali安装LAMP和DVWA

LANMP简介 LANMP是指一组通常用来搭建动态网站或者服务器的开源软件&#xff0c;本身都是各自独立的程序&#xff0c;但是因为常被放在一起使用&#xff0c;拥有了越来越高的兼容度&#xff0c;共同组成了一个强大的Web应用程序平台。 L:指Linux&#xff0c;一类Unix计算机操作…
阅读更多...
静态web服务器实战

静态web服务器实战

准备html页面&#xff0c;包含两个页面(index.html, index2.html)和一个404(404html)页面&#xff0c;目录示意&#xff1a; 1.返回固定页面 with open("website/index.html","r") as file: import socket# # 返回固定的页面 website/index.html if __na…
阅读更多...
静态分析C语言生成函数调用关系的利器——cally和egypt

静态分析C语言生成函数调用关系的利器——cally和egypt

大纲 准备工作安装graphviz安装cally安装egypt简单分析GCC产生RTL&#xff08;Register transfer language&#xff09;文件callyegypt总结 高级分析callyegypt 总结参考资料 在《静态分析C语言生成函数调用关系的利器——cflow》和《静态分析C语言生成函数调用关系的利器——c…
阅读更多...
HarmonyOS鸿蒙学习基础篇 - Text文本组件

HarmonyOS鸿蒙学习基础篇 - Text文本组件

该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 Text文本组件是可以显示一段文本的组件。该组件从API Version 7开始支持&#xff0c;从API version 9开始&#xff0c;该接口支持在ArkTS卡片中使用。 子组件 可…
阅读更多...
Flutter 页面嵌入 Android原生 View

Flutter 页面嵌入 Android原生 View

前言 文章主要讲解Flutter页面如何使用Android原生View&#xff0c;但用到了Flutter 和 Android原生 相互通信知识&#xff0c;建议先看完这篇讲解通信的文章 Flutter 与 Android原生 相互通信&#xff1a;BasicMessageChannel、MethodChannel、EventChannel-CSDN博客 数据观…
阅读更多...
Java面试题50道

Java面试题50道

文章目录 1.谈谈你对Spring的理解2.Spring的常用注解有哪些3.Spring中的bean线程安全吗4.Spring中的设计模式有哪些5.Spring事务传播行为有几种6.Spring是怎么解决循环依赖的7.SpringBoot自动配置原理8.SpringBoot配置文件类型以及加载顺序9.SpringCloud的常用组件有哪些10.说一…
阅读更多...
rabbitmq基础-java-5、Topic交换机

rabbitmq基础-java-5、Topic交换机

1、简介 Topic类型的Exchange与Direct相比&#xff0c;都是可以根据RoutingKey把消息路由到不同的队列。 只不过Topic类型Exchange可以让队列在绑定BindingKey 的时候使用通配符&#xff01; BindingKey 一般都是有一个或多个单词组成&#xff0c;多个单词之间以.分割&#x…
阅读更多...
（SSO单点登录）多个系统之间如何实现账号互通

（SSO单点登录）多个系统之间如何实现账号互通

SSO具有以下优点&#xff1a; 降低访问第三方网站风险&#xff1b;降低用户名和密码的管理成本&#xff1b;提高用户试用满意度&#xff1b;SSO使用标准的身份认证和授权协议&#xff0c;如OAuth、OpenID Connect等&#xff0c;可以保障用户身份的安全性和隐私性。 单点登录最大…
阅读更多...
文件上传技术总结

文件上传技术总结

语言可解析的后缀 &#xff08;前提&#xff1a;在Apache httpd.conf 配置文件中有特殊语言的配置 AddHandler application/x-httpd-php .php 搭配大小写、双重、空格来进行 其中&#xff1a; phtml、pht、php3、php4和php5都是Apache和php认可的php程序的文件后缀 常见的…
阅读更多...
C#使用IsLeapYear方法判断指定年份是否为闰年

C#使用IsLeapYear方法判断指定年份是否为闰年

目录 一、判断指定年是否为闰年的2个方法 1.使用IsLeapYear方法判断指定年份是否为闰年 2.使用自定义的算法计算指定年份是否为闰年 二、示例 1.方法1的实例 2.方法2的实例 一、判断指定年是否为闰年的2个方法 1.使用IsLeapYear方法判断指定年份是否为闰年 使用IsLeapY…
阅读更多...
【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解

【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解

前言&#xff1a;本文进行布线铺铜实战及详解布线铺铜的细节 在本专栏中【立创EDA-PCB设计基础】前面完成了布线铺铜前的设计规则的设置&#xff0c;接下来进行布线 布局原则是模块化布局&#xff08;优先布局好确定位置的器件&#xff0c;例如排针、接口、主控芯片&#xff…
阅读更多...
司铭宇老师：门店经理培训：如何成为一位卓越的门店经理

司铭宇老师：门店经理培训：如何成为一位卓越的门店经理

门店经理培训&#xff1a;如何成为一位卓越的门店经理 在激烈的市场竞争中&#xff0c;门店经理作为门店的灵魂人物&#xff0c;肩负着提升门店业绩、维护品牌形象、带领团队成长等重要职责。本文将为您解析如何成为一位卓越的门店经理&#xff0c;助力您的职业生涯迈向新高峰…
阅读更多...
【latex】在Overleaf的IEEE会议模板中，快速插入参考文献

【latex】在Overleaf的IEEE会议模板中，快速插入参考文献

【LaTeX】在Overleaf的IEEE会议模板中&#xff0c;快速插入参考文献 写在最前面第一步&#xff1a;在文献检索网站导出引用文献的bib文件第二步&#xff1a;编辑overleaf模版方法二&#xff1a;EduBirdie生成参考文献&#xff08;补充&#xff09;使用LaTeX在Overleaf的IEEE会议…
阅读更多...
html火焰文字特效

html火焰文字特效

下面是代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>HTML5火焰文字特效DEMO演示</title><link rel"stylesheet" href"css/style.css" media"screen" type&quo…
阅读更多...
接口测试 02 -- JMeter入门到实战

接口测试 02 -- JMeter入门到实战

前言 JM eter毕竟是做压测的工具&#xff0c;自动化这块还是有缺陷。 如果公司做一些简单的接口自动化&#xff0c;可以考虑使用JMeter快速完成&#xff0c;如果想做完善的接口自动化体系&#xff0c;建议还是基于Python来做。 为什么学习接口测试要先从JMeter开始&#xff1f;…
阅读更多...
路由器配置虚拟服务器

路由器配置虚拟服务器

文章目录 路由器配置虚拟服务器1.前言2.配置流程2.1 进入路由器的登录页面2.2 找到端口映射功能2.3 添加虚拟服务器2.4 查找路由器的动态IP2.5 SSH连接 路由器配置虚拟服务器 1.前言 局域网下面连接着路由器&#xff0c;路由器下面连接着服务器&#xff0c;我们自己的电脑想要…
阅读更多...
Unity | 渡鸦避难所-8 | URP 中利用 Shader 实现角色受击闪白动画

Unity | 渡鸦避难所-8 | URP 中利用 Shader 实现角色受击闪白动画

1. 效果预览 当角色受到攻击时&#xff0c;为了增加游戏的视觉效果和反馈&#xff0c;可以添加粒子等动画&#xff0c;也可以使用 Shader 实现受击闪白动画&#xff1a;受到攻击时变为白色&#xff0c;逐渐恢复为正常颜色 本游戏中设定英雄受击时播放粒子效果&#xff0c;怪物…
阅读更多...
什么是ORM思想？

什么是ORM思想？

1. ORM概念 ORM&#xff08;Object Relational Mapping&#xff09;对象关系映射模式&#xff0c;是一种技术&#xff0c;解决了面向对象与关系型数据库存互不匹配的现象。 ORM在业务逻辑层和数据库层之间充当了桥梁的作用。 2. ORM由来 在软件开发的过程中&#xff0c;通常…
阅读更多...
【每日一题】最长交替子数组

【每日一题】最长交替子数组

文章目录 Tag题目来源解题思路方法一&#xff1a;双层循环方法二&#xff1a;单层循环 写在最后 Tag 【双层循环】【单层循环】【数组】【2024-01-23】 题目来源 2765. 最长交替子数组 解题思路 两个方法&#xff0c;一个是双层循环&#xff0c;一个是单层循环。 方法一&am…
阅读更多...
C++——结构体

C++——结构体

1&#xff0c;结构体基本概念 结构体属于用户自定义的数据类型&#xff0c;允许用户存储不同的数据类型。像int&#xff08;整型&#xff09;&#xff0c;浮点型&#xff0c;bool型&#xff0c;字符串型等都是属于系统内置的数据类型。而今天要学习的结构体则是属于我们自定义…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023