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

news2024/11/28 14:40:14

目录

(一)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中文网

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

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

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

相关文章

面试经典150题——串联所有单词的子串（困难）

面试经典150题——串联所有单词的子串（困难）

"Opportunities dont happen, you create them." ​ - Chris Grosser 1. 题目描述 2. 题目分析与解析 2.1 思路一——暴力求解 遇见这种可能刚开始没什么思路的问题&#xff0c;先试着按照人的思维来求解该题目。对于一个人来讲&#xff0c;我想要找到 s 字符串中…
阅读更多...
Java的Cloneable接口和深拷贝

Java的Cloneable接口和深拷贝

Java 中内置了一些很有用的接口, Clonable 就是其中之一。 Object 类中存在一个 clone 方法, 调用这个方法可以创建一个对象的 "拷贝"。 但是要想合法调用 clone 方法, 必须要先实现 Clonable 接口, 否则就会抛出 CloneNotSupportedException 异常。 浅拷贝&#xff…
阅读更多...
数据结构-并查集

数据结构-并查集

并查集原理 在一些应用问题中&#xff0c;需要将n个不同的元素划分成一些不相交的集合。开始时&#xff0c;每个元素自成一个 单元素集合&#xff0c;然后按一定的规律将归于同一组元素的集合合并。在此过程中要反复用到查询一 个元素归属于那个集合的运算。适合于描述这类…
阅读更多...
cool Nodejs后端框架 如何快速入门 写一个接口

cool Nodejs后端框架 如何快速入门 写一个接口

1.cool 框架 js前端开发者 想自己写后端接口 快速入门的就是node.js 了 可以用这个框架自己做一些东西 或者实现前后端的开发 2.目录结构 这个基本上 就是cool 框架的项目结构 主要是 这个src 中的modules 文件夹 这个文件夹 主要是一些接口模块 比如 business 中 相当于…
阅读更多...
leetcode 448. 找到所有数组中消失的数字

leetcode 448. 找到所有数组中消失的数字

用的最土的办法&#xff0c;将数组nums中出现过的数字用map记录下来&#xff0c;再遍历1~n中的所有数字&#xff0c;凡是未在map中出现过的即为我们要找的数字。 Java代码如下&#xff1a; class Solution {public List<Integer> findDisappearedNumbers(int[] nums) {i…
阅读更多...
品牌之门：概率与潜力的无限延伸

品牌之门：概率与潜力的无限延伸

在品牌的世界里&#xff0c;每一个成功的推广都像是打开一扇门&#xff0c;从未知走向已知&#xff0c;从潜在走向显现。这扇门&#xff0c;既是品牌的起点&#xff0c;也是品牌发展的无限可能。 品牌&#xff0c;就像一扇紧闭的门&#xff0c;它静静地矗立在那里&#xff0c;…
阅读更多...
优先级队列(堆)_PriorityQueue

优先级队列(堆)_PriorityQueue

前言 想要看如何使用可以通过目录跳转到 PriorityQueue的使用 优先级队列 概念 队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#xff0c;操作的数据可能带有优先级&#xff0c;一般出队 列时&#xff0c;可能需要优先级高的元素先出队列&#xff0c;该中场…
阅读更多...
linuxqq关闭主面板后无法再次打开的问题

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

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

反序列化漏洞(一)Shiro漏洞CVE-2016-4437复现

★★免责声明★★ 文章中涉及的程序(方法)可能带有攻击性&#xff0c;仅供安全研究与学习之用&#xff0c;读者将信息做其他用途&#xff0c;由Ta承担全部法律及连带责任&#xff0c;文章作者不承担任何法律及连带责任。 1、前言 春节后第一篇&#xff0c;祝大家龙年一切顺利&…
阅读更多...
书生浦语大模型实战营-课程笔记（1）

书生浦语大模型实战营-课程笔记（1）

模型应用过程&#xff0c;大致还是了解的。和之前实习做CV项目的时候比起来&#xff0c;多了智能体这个环节。智能体是个啥&#xff1f; 类似上张图&#xff0c;智能体不太清楚。感觉是偏应用而不是模型的东西&#xff1f; 数据集类型很多&#xff0c;有文本/图片/视频。所以…
阅读更多...
仰暮计划|“​他们艰苦半生，但真的希望祖国安祥，山河无恙”

仰暮计划|“​他们艰苦半生，但真的希望祖国安祥，山河无恙”

自述&#xff0c;自赎 我没有在那个年代生活过&#xff0c;我一出生就是盛世中国&#xff0c;看遍了祖国的大好河山。但我没想到&#xff0c;走了这么远的路&#xff0c;吃了这么多的苦的爷爷会一直跟我说“不是国家不好&#xff0c;只是中国的钱拿去还债了&#xff0c;过了那…
阅读更多...
什么是 Docker 容器？以及操作 Docker 容器相关的命令汇总

什么是 Docker 容器？以及操作 Docker 容器相关的命令汇总

镜像仓库常用指令&#xff1a;Docker 镜像仓库是什么&#xff1f;有哪些镜像仓库命令&#xff1f; 镜像常用指令&#xff1a;操作 Docker 镜像的常用命令 1. 什么是容器&#xff1f; 容器是镜像的运行实体。容器是基于镜像创建的可运行实例&#xff0c;并且单独存在&#xff0…
阅读更多...
FastAI 之书（面向程序员的 FastAI）（八）

FastAI 之书（面向程序员的 FastAI）（八）

原文&#xff1a;www.bookstack.cn/read/th-fastai-book 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第二十章&#xff1a;总结思考 原文&#xff1a;www.bookstack.cn/read/th-fastai-book/cedc7ab42349d210.md 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA…
阅读更多...
Github 2024-02-14 开源项目日报 Top9

Github 2024-02-14 开源项目日报 Top9

根据Github Trendings的统计&#xff0c;今日(2024-02-14统计)共有9个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Rust项目4TypeScript项目1PowerShell项目1Java项目1JavaScript项目1Jupyter Notebook项目1非开发语言项目1Pyth…
阅读更多...
每日五道java面试题之java基础篇（八）

每日五道java面试题之java基础篇（八）

第一题.CopyOnWriteArrayList的底层原理是怎样的 ⾸先CopyOnWriteArrayList内部也是⽤过数组来实现的&#xff0c;在向CopyOnWriteArrayList添加元素时&#xff0c;会复制⼀个新的数组&#xff0c;写操作在新数组上进⾏&#xff0c;读操作在原数组上进⾏并且&#xff0c;写操作…
阅读更多...
Hive调优——合并小文件

Hive调优——合并小文件

目录 一、小文件产生的原因 二、小文件的危害 三、小文件的解决方案 3.1 小文件的预防 3.1.1 减少Map数量 3.1.2 减少Reduce的数量 3.2 已存在的小文件合并 3.2.1 方式一&#xff1a;insert overwrite (推荐) 3.2.2 方式二&#xff1a;concatenate 3.2.3 方式三&#xff…
阅读更多...
DOM事件练习1

DOM事件练习1

DOM事件练习1 1. 演示效果 2. 代码分析 用 ul 创建四个 li 列表整个列表的背景是红色的&#xff0c;鼠标悬浮在列表上&#xff0c;一行的变为蓝色点击任意列表&#xff0c;整个列表的背景变为白色&#xff0c;被点击的列表变为粉色需要用到 js 的点击事onclick件和forEach循环…
阅读更多...
手撕Promise

手撕Promise

文章目录 一、Promise的初体验1.初体验——抽奖案例 二、Promise的实践练习1.实践练习——fs读取文件2.实践练习——AJAX请求 三、Promise的常见骚操作1.封装fs读取文件操作2.util.promisify方法进行promise风格转化3.封装原生的Ajax4.Promise实例对象的两个属性&#xff08;1&…
阅读更多...
《Think in Java》

《Think in Java》

《Think in Java》 第一章&#xff1a;对象导论 1.1 抽象过程 1&#xff09;万物皆对象。 2&#xff09;程序是对象的集合&#xff0c;它们通过发送消息来告诉彼此所要做的。 3&#xff09;每个对象都有其他对象构成的存储&#xff0c;一个对象可以复用其他对象&#xff0c;从而…
阅读更多...
Sentinel 流控-关联模式

Sentinel 流控-关联模式

关联模式 A关联B, 当B流控后，A 的流控规则也生效了 条件 A 设置高级流控规则，关联 B资源B 设置普通流控规则（独立规则）实例 接口编写 package com.learning.springcloud.order.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.s…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023