初识webpack（二）解析resolve、插件plugins、dev-server

目录

(一)webpack的解析(resolve)

1.resovle.alias

2.resolve.extensions

3.resolve.mainFiles

(二) plugin插件

1.CleanWebpackPlugin

2.HtmlWebpackPlugin

3.DefinePlugin 

(三)webpack-dev-server

1.开启本地服务器

2.HMR模块热替换

3.devServer的更多配置项 

(一)webpack的解析(resolve)

解析(Resolve) | webpack 中文文档 | webpack中文文档 | webpack中文网

resolve用于配置模块如何被解析

webpack能解析的三种文件路径

  1. 绝对路径：已获得文件的绝对路径，不需要进一步解析。
  2. 相对路径：通过import/require中给的相对路径，来拼接上下文路径，生成该模块的绝对路径
  3. 模块路径：在resolve.modules配置中指定的所有目录中检索模块，默认从node_modules目录中查找模块。

确定路径是文件还是文件夹 

是文件：

  • 有扩展名：直接打包
  • 没有扩展名：根据resolve.extensions配置作为文件扩展名解析 

是文件夹：

在文件中根据resolve.mainFiles配置中指定的文件顺序查找

  • resolve.mainFiles配置默认文件名 index 
  • 再根据resolve.extensions配置来解析扩展名

接下来只详细写一下两个配置项，比较常用

1.resovle.alias

当文件目录很复杂时，使用相对路径../../这种形式进行引用会非常不直观不方便。

给常用的路径起一个别名，来确保模块引用变得简单

例如：给/src/utils文件夹取别名

/* 在webpack.config.js中 */
module.exports = {...module: {/* resolve用于配置模块如何被解析 */resolve: {/* 为路径取别名 引入时更直观方便 */alias: {utils: path.resolve(__dirname, 'src/utils/')}}},
}

原来使用该模块路径引用情况：

import A from '../../utils/a'

现在使用该模块路径：

import A from 'utils/a'

2.resolve.extensions

webpack解析文件时不带扩展名，会自动根据resolve.extensions配置中的扩展名按照顺序进行匹配，能够使用户在引入模块时不带扩展 

默认值是 ['.wasm','.mjs','.js','.json'] 

可自行配置需要的扩展名

resolve: {/* 扩展名数组 */extensions:['.ts','.js','.wasm'] // 会自动覆盖默认数组
}

注意：会自动覆盖默认数组，可以使用'...'来添加默认扩展数组

resolve: {/* 扩展名数组 */extensions:['.ts','.js','.wasm','...']
}

3.resolve.mainFiles

解析目录时要使用的文件名

resolve: {mainFiles: ['index'],},

(二) plugin插件

plugin | webpack 中文文档 | webpack中文文档 | webpack中文网

loader：用于转换某些类型的模块

插件plugin：用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。 

接下来详细写一些常用插件的使用方法

1.CleanWebpackPlugin

webpack打包生成文件夹后再运行打包不会将原来的文件夹全部删除，需要手动删除文件夹

该插件可以帮助我们直接删除原打包文件夹并重新生成

下载CleanWebpackPlugin插件：

npm i clean-webpack-plugin -D 

在webpack.config.js文件中进行插件配置：

// 局部引入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')module.exports = {...plugins: [// 使用插件new CleanWebpackPlugin()]
}

现在，webpack官网plugins中不再记录有CleanWebpackPlugin插件，可以直接在output配置中设置 clean:true 即可

Output | webpack 中文文档 | webpack中文文档 | webpack中文网

output:{clean: true
}

2.HtmlWebpackPlugin

HtmlWebpackPlugin插件会在每次打包时在打包文件夹中自动生成html文件，

下载插件：

npm install --save-dev html-webpack-plugin

在webpack.config.js中进行配置：

// 为打包文件生成html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {plugins: [// 使用插件new CleanWebpackPlugin(),new HtmlWebpackPlugin({// 打包项目的标题title: 'dogeggWebsite',// html文件名 默认index.htmlfilename: 'index.html',// 根据当下index.html文件的格式生成打包文件夹中的html // 默认使用路径src/index.html的模板格式template: './src/index.html',})]
}

更多该插件的配置项在官方文档中查看

3.DefinePlugin 

DefinePlugin | webpack 中文文档 | webpack中文文档 | webpack中文网

DefinePlugin插件允许在编译时创建全局常量使用，不需要额外下载

使用方法：

传递给 DefinePlugin 的每个键都是一个标识符或多个以 . 连接的标识符。

  • 如果该值为字符串，它将被作为代码片段来使用。
  • 如果该值不是字符串，则将被转换成字符串（包括函数方法）。
  • 如果值是一个对象，则它所有的键将使用相同方法定义。
  • 如果键添加 typeof 作为前缀，它会被定义为 typeof 调用。

在webpack.config.js中配置：

// 引入definePlugin
const { DefinePlugin } = require('webpack')module.exports = {...plugins: [new DefinePlugin({// 传入参数是键值对形式，引号内是js代码形式// 'BASE_URL': '"./"',BASE_URL: JSON.stringify("./")})]
}

在src/index.html中使用该常量：

 <link rel="icon" href="<%= BASE_URL %> favicon.ico" type="image/x-icon">

打包到文件夹后效果：

<link rel="icon" href="./ favicon.ico" type="image/x-icon">

(三)webpack-dev-server

在开发模式中，希望对代码做出改动能够立即编译并展示，就像liveServer一样

因此，使用webpack的开发工具来完成这一效果

webpack 提供几种可选方式，帮助你在代码发生变化后自动编译代码：

  1. webpack 的 Watch Mode（观察模式）
  2. webpack-dev-server
  3. webpack-dev-middleware

下面使用webpack-dev-server来搭建本地服务器

1.开启本地服务器

webpack-dev-server 提供了一个基本的 web server，并具有实时重新加载的功能

下载：npm i webpack-dev-server -D 

在package.json里配置serve的便捷指令

"scripts": {"build": "webpack","serve": "webpack serve"},

在webpack.config.js中对devServer配置项进行自定义的配置

devServer: {}

在终端开启服务器：npm run serve

默认在端口8080开启 

2.HMR模块热替换

HMR 全称 Hot Module Replacement，翻译为模块热替换

模块热替换是指，在应用程序运行过程中，替换、修改、删除模块，而无需刷新整个页面

webpack-dev-server默认开启HMR

但还是会出现更改一个模块整个页面都刷新的情况：这就需要在入口文件main.js中对需要热替换的模块进行设置

/* 在入口文件中 */// 如果HMR开启，就对对应模块进行热更新，并执行回调函数
if (module.hot) {module.hot.accept('./utils/a.js', () => {console.log('a模块已更新');})
}

再对a模块的内容进行修改就会发现，只更新了a模块内容 

3.devServer的更多配置项 

DevServer | webpack 中文文档 | webpack中文文档 | webpack中文网

这个不详细写了，需要用到的时候查阅就可以了 

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

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

相关文章

很在意别人的看法，怎么办？

很在意别人的看法，怎么办？

如果把我们每天的幸福和烦恼列出来&#xff0c;你也许会发现一件有趣的事情&#xff1a; 带给我们幸福感的&#xff0c;往往是别人的感谢、鼓励和肯定。它们会带给你许多动力&#xff0c;让你一整天都充满激情。 反过来&#xff0c;带给我们烦恼的&#xff0c;大多数来源于什么…
阅读更多...
vscode运行Live Server报错：Windows找不到文件Microsoft Edge

vscode运行Live Server报错：Windows找不到文件Microsoft Edge

问题场景&#xff1a; 在写好的html文件空白处右键单击Open with Live Server后弹出下面提示框报错Windows找不到文件Microsoft Edge有的电脑报错是Windows找不到文件chrome 问题解决方案&#xff1a; 应该是由于你电脑上的默认浏览器Chrome的安装路径变了&#xff0c;更新C…
阅读更多...
【Linux】进程信号概念 | 核心转储 | 信号的产生

【Linux】进程信号概念 | 核心转储 | 信号的产生

文章目录 一、信号入门1.1 生活中的信号1.2 进程角度的信号1.3 信号的概念1.4 信号的三种常见处理方式 二、信号的产生2.1 通过终端按键产生信号问题1&#xff1a;OS怎么知道键盘输入了ControlC &#xff1f;问题2&#xff1a;按CtrlC终止进程和按Ctrl\终止进程&#xff0c;有什…
阅读更多...
mysql表设计

mysql表设计

表设计流程&#xff1a; &#xff08;1&#xff09;分库&#xff1a;根据模块分 &#xff08;2&#xff09;分表&#xff1a;根据流程分表 &#xff08;3&#xff09;冗余字段和视图设计 21个表设计准则 &#xff08;1&#xff09;命名规范 account_no,account_number 表名用t…
阅读更多...
【闲谈】开源软件的崛起与影响

【闲谈】开源软件的崛起与影响

随着信息技术的快速发展&#xff0c;开源软件已经成为软件开发的趋势&#xff0c;并产生了深远的影响。开源软件的低成本、可协作性和透明度等特点&#xff0c;使得越来越多的企业和个人选择使用开源软件&#xff0c;促进了软件行业的繁荣。然而&#xff0c;在使用开源软件的过…
阅读更多...
软考 系统分析师系列知识点之信息系统战略规划方法（10）

软考 系统分析师系列知识点之信息系统战略规划方法（10）

接前一篇文章&#xff1a;软考 系统分析师系列知识点之信息系统战略规划方法&#xff08;9&#xff09; 所属章节&#xff1a; 第7章. 企业信息化战略与实施 第4节. 信息系统战略规划方法 7.4.6 战略栅格法 战略栅格&#xff08;Strategic Grid&#xff0c;SG&#xff09;法是…
阅读更多...
基于CU,PO,RD,IPO矩阵图分析数据资产-自创

基于CU,PO,RD,IPO矩阵图分析数据资产-自创

术语 数据资产&#xff1a;数据资产是具有价值的数据资源。没有价值的数据资源&#xff0c;通过采集&#xff0c;整理&#xff0c;汇总等加工后&#xff0c;也可以成为具有直接或间接价值的数据资产。传统企业逐渐数字化转型&#xff0c;尤其是互联网企业&#xff0c;都十分重视…
阅读更多...
C#中implicit和explicit

C#中implicit和explicit

理解: 使用等号代替构造函数调用的效果以类似重载操作符的形式定义用于类型转换的函数前者类型转换时候直接写等号赋值语法,后者要额外加目标类型的强制转换stirng str -> object o -> int a 可以 int a (int)(str as object)转换通过编译,但没有转换逻辑所以运行会报错…
阅读更多...
《区块链公链数据分析简易速速上手小册》第3章：区块链数据结构（2024 最新版）

《区块链公链数据分析简易速速上手小册》第3章：区块链数据结构（2024 最新版）

文章目录 3.1 区块和交易的结构3.1.1 基础知识3.1.2 重点案例&#xff1a;构建简单的区块链3.1.3 拓展案例 1&#xff1a;验证交易签名生成密钥对签名交易验证签名完整的交易签名与验证演示 3.1.4 拓展案例 2&#xff1a;监听和解析区块链事件代币合约示例&#xff08;Solidity…
阅读更多...
Android adb使用超级大全

Android adb使用超级大全

Android adb使用超级大全 ADB&#xff0c;即Android Debug Bridge&#xff0c;是一款强大的工具&#xff0c;对于Android开发/测试人员来说是不可或缺的&#xff0c;同时也是Android设备玩家的好玩具。本文将详细介绍ADB的使用方法。 ADB的基本用法如下&#xff1a; 命令语法…
阅读更多...
Pb协议的接口测试

Pb协议的接口测试

Protocol Buffers 是谷歌开源的序列化与反序列化框架。它与语言无关、平台无关、具有可扩展的机制。用于序列化结构化数据&#xff0c;此工具对标 XML &#xff0c;支持自动编码&#xff0c;解码。比 XML 性能好&#xff0c;且数据易于解析。更多有关工具的介绍可参考官网。 P…
阅读更多...
Django form组件 - 神奇的后端直接渲染HTML

Django form组件 - 神奇的后端直接渲染HTML

前言 之前在HTML页面中利用form表单向后端提交数据时会写一些获取用户输入的标签并且使用form标签将其包裹起来。并且很多场景下都需要对用户的输入做校验&#xff0c;比如用户输入的长度和格式等&#xff0c;如果用户输入的有误就需要在页面上相应的位置显示相应的错误信息。…
阅读更多...
RBF神经网络中的RBF的英文全称是什么，是用来干什么的？

RBF神经网络中的RBF的英文全称是什么，是用来干什么的？

问题描述&#xff1a;RBF神经网络中的RBF的英文全称是什么&#xff0c;是用来干什么的&#xff1f; 问题解答&#xff1a; RBF神经网络中的RBF是径向基函数&#xff08;Radial Basis Function&#xff09;的缩写。径向基函数是一种在机器学习和模式识别中常用的函数类型&…
阅读更多...
数据库从入门到精通（一）数据库基础操作

数据库从入门到精通（一）数据库基础操作

mysql数据库基础操作 cmd下启动mysql数据库操作命令数据库重要的删除操作数据库增删改查操作插入数据更新数据删除数据查询数据查询指定记录in查询满足指定范围之内的条件记录not in查询不在指定范围之内的条件记录带between and 的范围查询带like的字符匹配查询(d%以d开头,%d以…
阅读更多...
猫头虎分享已解决Bug || SyntaxError: Unexpected token o in JSON at position 1 ‍

猫头虎分享已解决Bug || SyntaxError: Unexpected token o in JSON at position 1 ‍

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …
阅读更多...
【MATLAB】小波神经网络回归预测算法

【MATLAB】小波神经网络回归预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 小波神经网络回归预测算法是一种利用小波变换和人工神经网络相结合的方法&#xff0c;用于解决回归预测问题。下面将详细介绍该算法的原理与方法&#xff1a; 小波变换&#xff1a; 小波变…
阅读更多...
rocketMQ下载、安装及配置

rocketMQ下载、安装及配置

topic主题 - 里边存在多个队列&#xff08;队列是真实存在的&#xff09; rocketMQ安装及配置 一、官网下载 windows和linux系统版本都一样。Binary 下载 下载 | RocketMQ (apache.org) 二、修改运行内存及broker.conf、配置环境变量 1、修改根目录->bin目录下runserve…
阅读更多...
如何生成一个修仙世界的狗血短剧剧本2

如何生成一个修仙世界的狗血短剧剧本2

如何生成一个修仙世界的狗血短剧剧本2 生成一个修仙世界的狗血短剧剧本对话 生成一个修仙世界的狗血短剧剧本 剧本名称&#xff1a;《仙途情缘》 角色&#xff1a; 易天行&#xff1a;男主角&#xff0c;天赋异禀的修仙者&#xff0c;性格坚毅&#xff0c;正直善良。梦瑶&…
阅读更多...
ACM训练题：互不侵犯

ACM训练题：互不侵犯

一看数据范围&#xff0c;如果是枚举所有的棋盘情况&#xff0c;2^K&#xff0c;肯定超了&#xff0c;自然是要一行一行递推&#xff0c;而相邻这个情况用位运算会比较方便&#xff0c;所以用状压dp。 具体算法&#xff1a;dp[i][j][k]表示第i行&#xff0c;前i行有j个棋子&…
阅读更多...
P5440 【XR-2】奇迹 (大模拟dfs+欧拉筛板子+闰年)

P5440 【XR-2】奇迹 (大模拟dfs+欧拉筛板子+闰年)

传送门https://www.luogu.com.cn/problem/P5440 相信奇迹的人&#xff0c;本身就和奇迹一样了不起。——笛亚 《星游记》 思路历程&#xff1a;很离谱的一题&#xff0c;在理论上并不困难&#xff0c;只要简单dfs欧拉筛就能过。在一开始&#xff0c;我采用了倒着模拟的思路&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023