初识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.html
            filename: '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中文网

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

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

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

相关文章

.NET高级面试指南专题七【SocketWebSocket】

.NET高级面试指南专题七【SocketWebSocket】

Socket&#xff08;套接字&#xff09;是一种在计算机网络中实现通信的一种机制&#xff0c;它提供了一种标准的接口&#xff0c;使不同计算机上的程序能够通过网络进行数据交换。Socket允许在网络中的不同设备之间建立连接&#xff0c;进行双向的数据传输。 Socket通常用于实现…
阅读更多...
Map和Set（哈希表）

Map和Set（哈希表）

目录 map&#xff1a; map说明&#xff1a; Map.Entry的说明&#xff1a;,v> Map 的常用方法: 演示&#xff1a; 注意&#xff1a; TreeMap和HashMap的区别 Set&#xff1a; 常见方法说明&#xff1a; 注意&#xff1a; TreeSet和HashSet的区别 哈希表: 冲突&a…
阅读更多...
FileZilla Server 1.8.1内网搭建

FileZilla Server 1.8.1内网搭建

配置环境服务器服务器下载服务器配置服务器配置 Server - ConfigureServer Listeners - Port 协议设置 Protocols settingsFTP and FTP over TLS(FTPS) Rights management(权利管理)Users(用户) 客户端建立连接 配置环境 服务器处于局域网内: 客户端 < -访问- > 公网 &l…
阅读更多...
车载软件架构 —— Adaptive AUTOSAR软件架构

车载软件架构 —— Adaptive AUTOSAR软件架构

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师&#xff08;Wechat&#xff1a;gongkenan2013&#xff09;。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 本就是小人物&#xff0c;输了就是输了&#…
阅读更多...
寒假思维训练day21

寒假思维训练day21

今天更新一道不错的状态压缩DP题&#xff0c;顺带总结一下状态压缩DP。 摘要&#xff1a; Part1 浅谈状态压缩DP的理解 Part2 浅谈对状态机DP的理解 Part3 关于状态压缩DP的1道例题 Part1 状态压缩DP 1、状态压缩DP&#xff1a; 事物的状态可能包含多个特征&#xff0c;…
阅读更多...
linuxqq关闭主面板后无法再次打开的问题

linuxqq关闭主面板后无法再次打开的问题

文章目录 前言解决方案强调一点 前言 听说QQ出了linux版&#xff0c;所以来试试。结果试试就逝世。这次记录一个关闭后没办法打开的解决办法。 解决方案 刚安装好后如果点了关闭&#xff0c;系统托盘里也没有&#xff0c;点击图标又是重新登录。当然&#xff0c;我们最简单、…
阅读更多...
浅谈Linux环境

浅谈Linux环境

冯诺依曼体系结构&#xff1a; 绝大多数的计算机都遵守冯诺依曼体系结构 在冯诺依曼体系结构下各个硬件相互配合处理数据并反馈结果给用户 其中控制器和运算器统称为中央处理器&#xff08;CPU&#xff09;&#xff0c;是计算机硬件中最核心的部分&#xff0c;像人类的大脑操控…
阅读更多...
钓鱼邮件的发送工具GUI

钓鱼邮件的发送工具GUI

一.简介 本程序利用Python语言编写&#xff0c;使用Tkinter实现图形化界面&#xff0c;可使用Pyinstaller进行exe打包&#xff0c;程序主界面截图如下&#xff1a; 二.功能 1.支持腾讯企业邮、网易企业邮、阿里企业邮、自建邮服SMTP授权账号&#xff08;其他邮服&#xff0c…
阅读更多...
【HTML】交友软件上照片的遮罩是如何做的

【HTML】交友软件上照片的遮罩是如何做的

笑谈 我不知道大家有没有在夜深人静的时候感受到孤苦难耐&#xff0c;&#x1f436;。于是就去下了一些交友软件来排遣寂寞。可惜的是&#xff0c;有些交友软件真不够意思&#xff0c;连一些漂亮小姐姐的图片都要进行遮罩&#xff0c;完全不考虑兄弟们的感受,&#x1f620;。所…
阅读更多...
微信小程序（四十一）wechat-http的使用

微信小程序（四十一）wechat-http的使用

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.模块下载 2.模块的使用 在终端输入npm install wechat-http 没有安装成功vue的先看之前的一篇 微信小程序&#xff08;二十&#xff09;Vant组件库的配置- 如果按以上的成功配置出现如下报错先输入以下语句 …
阅读更多...
知识价值2-什么是IDE？新手用哪个IDE比较好？

知识价值2-什么是IDE？新手用哪个IDE比较好？

IDE是集成开发环境&#xff08;Integrated Development Environment&#xff09;的缩写&#xff0c;是一种软件应用程序&#xff0c;旨在提供集成的工具集&#xff0c;以方便开发人员进行软件开发。IDE通常包括代码编辑器、编译器、调试器和其他工具&#xff0c;以支持软件开发…
阅读更多...
crack实验

crack实验

资源下载 【免费】crack资源&#xff08;这玩意还要不少于11字&#xff09;资源-CSDN文库 内容 源码 这是一段简单的密码判断程序 流程 exe直接用ida开&#xff08;因该是release的exe&#xff09; 选中分支点直接按空格 此时的va地址是0010106e用动态调试软件调试&#xf…
阅读更多...
微信小程序学习指南：从基础知识到代码展示

微信小程序学习指南：从基础知识到代码展示

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…
阅读更多...
软件实例分享，宠物店兽医电子处方开单系统软件教程

软件实例分享，宠物店兽医电子处方开单系统软件教程

软件实例分享&#xff0c;宠物店兽医电子处方开单系统软件教程 一、软件教程问答 以下教程以 佳易王宠物店兽医电子处方软件V16.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 问&#xff1a;宠物医院电子处方单子使用的纸张大小是多少&…
阅读更多...
Screw自动生成数据库文档

Screw自动生成数据库文档

Screw简介 官方地址 Screw可以根据数据库中的表自动生成HTML、Word、Markdown格式的文档。 Springboot 3.1集成 生成Springboot项目 Spring Initializr Maven依赖 <dependency><groupId>cn.smallbun.screw</groupId><artifactId>screw-core</…
阅读更多...
GPT4：画一只小怪兽，但是不断升级

GPT4：画一只小怪兽，但是不断升级

请你画一只1级的萌怪兽 请你画一只3级的萌怪兽 请你画一只5级的小怪兽 请你画一只10级的小怪兽 请你画一只50级的怪兽 请你画一只100级的怪兽 怪兽被闪电劈了一下&#xff0c;变成了一只0.1级的可爱小怪兽
阅读更多...
JAVA-多进程开发-创建等待进程

JAVA-多进程开发-创建等待进程

前言 在项目中&#xff0c;为了实现“并发编程”&#xff08;同时执行多个任务&#xff09;&#xff0c;就引入了“多进程编程”&#xff0c;把一个很大的任务&#xff0c;拆分成若干个很小的任务&#xff0c;创建多个进程&#xff0c;每个进程分别负责其中的一部分任务。 这也…
阅读更多...
（三十七）大数据实战——Solr服务的部署安装

（三十七）大数据实战——Solr服务的部署安装

前言 Solr是一个基于Apache Lucene的开源搜索平台&#xff0c;它提供了强大的全文搜索、分布式搜索和数据分析功能。Solr 可以用于构建高性能的搜索应用程序&#xff0c;支持从海量数据中快速检索和分析信息。Solr 使用倒排索引和先进的搜索算法&#xff0c;可实现快速而准确的…
阅读更多...
NLP快速入门

NLP快速入门

NLP入门 课程链接&#xff1a;https://www.bilibili.com/video/BV17K4y1W7yb/?p1&vd_source3f265bbf5a1f54aab2155d9cc1250219 参考文档链接1&#xff1a;NLP知识点&#xff1a;Tokenizer分词器 - 掘金 (juejin.cn) 一、分词 分词是什么&#xff1f; 每个字母都有对应…
阅读更多...
Codeforces Round 169 (Div. 2)C. Little Girl and Maximum Sum（差分、贪心）

Codeforces Round 169 (Div. 2)C. Little Girl and Maximum Sum（差分、贪心）

文章目录 题面链接题意题解代码总结 题面 链接 C. Little Girl and Maximum Sum 题意 给q个[l,r]将所有这些区间里面的数相加和最大。 可以进行的操作是任意排列数组 题解 对出现的每个区间内的位置加上1&#xff0c;代表权值 操作完之后求一遍前缀和&#xff0c;得到每个…
阅读更多...
最新文章

Copyright @ 2022~2023