初识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.hqwc.cn/news/468739.html

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

相关文章

Spring Security学习（四）——登陆认证（包括自定义登录页）

Spring Security学习（四）——登陆认证（包括自定义登录页）

前言 和前面的文章隔了很长时间才更新Spring Security系列&#xff0c;主要原因一个是之前太忙了&#xff0c;把项目都忙完了&#xff0c;赶上春节假期&#xff0c;就慢慢研究。Spring Security的体系非常复杂&#xff0c;一口吃不了热豆腐&#xff0c;没办法速成&#xff0c;…
阅读更多...
Swift Combine 使用 flatMap 和 catch错误处理 从入门到精通十三

Swift Combine 使用 flatMap 和 catch错误处理 从入门到精通十三

Combine 系列 Swift Combine 从入门到精通一Swift Combine 发布者订阅者操作者 从入门到精通二Swift Combine 管道 从入门到精通三Swift Combine 发布者publisher的生命周期 从入门到精通四Swift Combine 操作符operations和Subjects发布者的生命周期 从入门到精通五Swift Com…
阅读更多...
浅谈应该遵守的伦敦银交易规则

浅谈应该遵守的伦敦银交易规则

做伦敦银投资的朋友应遵守伦敦银交易规则&#xff0c;伦敦银交易规则不是指那些伦敦银交易技巧&#xff0c;而是在这个市场中要遵循的一些约定&#xff0c;下面我们就来讨论一下。 风险管理。风险管理即指投资者控制自己一笔乃至整体交易的风险&#xff0c;没有风险管理意识的投…
阅读更多...
顾问聘请协议（模板）

顾问聘请协议（模板）

甲方&#xff1a;________________ 　　乙方&#xff1a;________________ 诚信合作是一切事业发展的基础&#xff0c;外部智力是企业进步的源泉。甲、乙双方经友好协商达成本协议&#xff0c;甲方愿意聘请乙方为特邀管理顾问&#xff0c;乙方愿按本协议内容与甲方合作。 一、合…
阅读更多...
《区块链公链数据分析简易速速上手小册》第6章：区块链数据的应用（2024 最新版）

《区块链公链数据分析简易速速上手小册》第6章：区块链数据的应用（2024 最新版）

文章目录 6.1 市场趋势分析6.1.1 基础知识6.1.2 重点案例&#xff1a;分析比特币市场趋势准备工作实现步骤步骤1: 加载和预处理数据步骤2: 可视化价格和交易量趋势步骤3: 分析链上活动步骤4: 综合分析 结论 6.1.3 拓展案例 1&#xff1a;链上活动分析准备工作实现步骤步骤1: 加…
阅读更多...
【Web】NSSCTF Round#18 Basic个人wp(部分)

【Web】NSSCTF Round#18 Basic个人wp(部分)

目录 ①门酱想玩什么呢&#xff1f; ②Becomeroot ①门酱想玩什么呢&#xff1f; 先试一下随便给个链接 不能访问远程链接&#xff0c;结合评论区功能&#xff0c;不难联想到xss&#xff0c;只要给个评论区链接让门酱访问就可 我们研究下评论区 从评论区知道&#xff0c;要…
阅读更多...
【双指针】【C++算法】1537. 最大得分

【双指针】【C++算法】1537. 最大得分

作者推荐 【深度优先搜索】【树】【图论】2973. 树中每个节点放置的金币数目 本文涉及知识点 双指针 LeetCoce 1537. 最大得分 你有两个 有序 且数组内元素互不相同的数组 nums1 和 nums2 。 一条 合法路径 定义如下&#xff1a; 选择数组 nums1 或者 nums2 开始遍历&…
阅读更多...
【linux内核调试及根文件系统】

【linux内核调试及根文件系统】

linux内核分成两个部分&#xff0c;一个是逻辑代码存于驱动代码&#xff0c;一个是硬件信息存于设备树 linux内核分成两个部分一部分为逻辑代码放在uimage&#xff0c;另一部分硬件信息放在设备树
阅读更多...
Stable Diffusion之最全详解图解

Stable Diffusion之最全详解图解

Stable Diffusion之最全详解图解 1. Stable Diffusion介绍1.1 研究背景1.2 学术名词 2.Stable Diffusion原理解析2.1 技术架构2.2 原理介绍扩散过程 3.1 Diffusion前向过程3.2 Diffusion逆向&#xff08;推断&#xff09;过程 1. Stable Diffusion介绍 Stable Diffusion是2022…
阅读更多...
【AIGC使用教程】Notion AI 从注册到体验：如何免费使用

【AIGC使用教程】Notion AI 从注册到体验：如何免费使用

欢迎关注【AIGC使用教程】 专栏 【AIGC使用教程】SciSpace 论文阅读神器 【AIGC使用教程】Microsoft Edge/Bing Chat 注册使用完全指南 【AIGC使用教程】GitHub Copilot 免费注册及在 VS Code 中的安装使用 【AIGC使用教程】GitHub Copilot 免费注册及在 PyCharm 中的安装使用 …
阅读更多...
几个经典金融理论

几个经典金融理论

完整EA&#xff1a;Nerve Knife.ex4黄金交易策略_黄金趋势ea-CSDN博客 一、预期效用理论 预期效用理论是描述人们在做出决策时如何考虑风险和不确定性的一种理论。该理论最初由经济学家冯诺伊曼&#xff08;John von Neumann&#xff09;和奥斯卡摩根斯坦恩&#xff08;Oskar…
阅读更多...
4核8G服务器配置性能怎么样?12M带宽配置服务器能干什么?

4核8G服务器配置性能怎么样?12M带宽配置服务器能干什么?

腾讯云轻量4核8G12M轻量应用服务器支持多少人同时在线&#xff1f;通用型-4核8G-180G-2000G&#xff0c;2000GB月流量&#xff0c;系统盘为180GB SSD盘&#xff0c;12M公网带宽&#xff0c;下载速度峰值为1536KB/s&#xff0c;即1.5M/秒&#xff0c;假设网站内页平均大小为60KB…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023