开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

webpack.externals相对路径导致意外的令牌

webpack.externals是webpack的配置选项之一，用于指定在打包过程中不需要被打包的模块或库。它可以用于将某些模块或库排除在打包文件之外，从而减小打包文件的体积。

相对路径导致意外的令牌是指在配置webpack.externals时，使用相对路径导致无法正确解析模块或库的情况。这可能会导致打包过程中出现错误或意外的行为。

为了避免相对路径导致意外的令牌，可以采取以下几种方法：

使用绝对路径：使用绝对路径来指定模块或库的位置，确保webpack能够正确解析它们。例如，可以使用__dirname变量来获取当前文件所在的目录，然后使用路径拼接的方式指定模块或库的位置。
使用别名(alias)：在webpack的配置文件中，可以通过配置resolve.alias来为模块或库指定别名。这样，在引入模块或库时，可以使用别名来代替相对路径，从而避免相对路径导致的问题。
使用绝对路径导入：在代码中，可以直接使用绝对路径来导入模块或库，而不是使用相对路径。这样可以确保webpack能够正确解析它们。

总结起来，为了避免相对路径导致意外的令牌，我们可以使用绝对路径、别名或绝对路径导入来指定模块或库的位置，从而确保webpack能够正确解析它们。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关搜索:CDK Deploy导致“意外的令牌A in JSON at position 0”HtmlWebpackPlugin之前的自定义加载器导致“意外令牌”错误 Jest -意外的令牌导出 Jest SyntaxError:意外的令牌<Lambda导致意外的令牌 Powershell错误-意外的令牌错误 ReactJS："SyntaxError:意外的令牌“tensorflow导入的意外令牌*Uncaught：`意外的令牌导入分析错误："<!DOCTYPE html>“导致意外的令牌漂亮/漂亮

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

全网最优雅的 React 源码调试方式

东东是一名前端工程师，主要用 React 技术栈，用了多年之后想深入一下，所以最近开始看 React 源码。

02

看啥双拱门，来学 webpack 3啊

---- webpack 是前端开发者一个跨不过去的编译工具。不过由于他的快速迭代，让很多同学在学一个版本的时候，下一个新版本就发布了，让人感觉非常蛋疼和无奈： “我是谁，我在干嘛，我要做什么？” 不过，如果你已经掌握 webpack 比较老的版本，对于新版本的学习而言，应该只需要 0.5 天的工作量就可以完成。因为，其基本理念都是以 JS 为中心，增加的只是其辅助特性。 webpack 到目前为止已经走过了三个大版本，每个版本之间都，增加了非常多可用的特性，但是每个版本的具体配置项都有些差异，很容易让老版

02

怎么解决koa写server发布的噩梦

前言 📷 . 以前在用koa写server的时候，发布简直是噩梦。需要将src里面的全部文件都覆盖掉，config配置文件也要覆盖，稍有不慎就会线上报各种各样的问题，然后就得回退，本地调好在发布。偶然看见一篇文章讲如何使用webpack打包koa app，惊为天人，原来webpack也能打包后台。这在以前想都没想过。关键问题一：所有node_modules里的模块都不进行打包 webpack的核心功能是将引用的各个模块打到一个文件里，并会将各种规范的模块进行统一的模块化处理(webpack规范)。然而

08

webpack 学习小结

07

webpack 学习小结

webpack 学习小结 1 前言打包，本质来说就是把许多零散的文件有序的合并成为一个文件，达到前端优化的效果它的前世今生就不说了，感兴趣的同学可以去学习相关知识构建 != 打包，反之亦然打包可以说是构建的一环，构建可以做更多的事情但是，打包永远都是构建的一个核心 1.1 相关工具打包工具有很多，下面稍微介绍一下笔者认识的： 1.1.1 grunt 准确来说，grunt 是个构建工具它只是提供了一些基础能力，出现的较早，社区强大 1.1.2 gulp gulp 和 grunt 很像，

01

webpack 学习小结

可以说，fis 比较大，对整个打包过程有一个核心规范和流程，并且总结并提供了打包构建中的3个核心能力

01

Vue打包优化

http1.1下面分割的chunk也不宜太多，因为在同一个域下面的资源并发下载的资源数量是有限的，比如chrome大约是6个资源同时下载，这6个资源中必须要有某个资源下载完毕后才会下载其他资源，但也不一定非要少于6个，因为某些资源可能直接读取内存，某些资源可以通过cdn从别的域中读取。

01

vite基本配置教程

最近做项目要求将webpack打包方式换成vite，下面将详细讲解一下配置vite需要修改哪些文件，以及过程中踩到的奇葩坑。

01

Vue-Cli优化编译速度

Vue-Cli脚手架会有webpack的很多默认行为，因此我们得知道基于Vue-Cli的项目，当前的webpack都配置了啥，然后才能做针对性的分析与优化。

02

作为面试官，为什么我推荐微前端作为前端面试的亮点？

作为面试官，我经常听到很多候选人说在公司做的项目很简单，平常就是堆页面，写管理端，写H5,没有任何亮点，我以我一次面试候选人的经历分享给大家

01

从一个webpack打包bug到探索resolve背后的机制

经过进一步调试发现，原因是在业务代码的lib/axios.ts的import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios';这行代码的引入居然是引入的业务代码的lib/``axios``.ts而不是node_modules中的axios

02

vue如何动态加载本地图片

大家好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我(全网同名)，解锁前端成长新姿势。

02

Vue项目优化首页加载速度

这一步之后，打包后会发现很大的chunk-vendors.xxxxxxx.js不见了，其实是分成了不同的js文件

03

webpack配置完全指南

对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面： entry 、 output 、 mode 、 resolve 、 module 、 optimization 、 plugin 、 source map 、 performance 等，本文就来重点分析下这些部分。

02

webpack配置完全指南_2023-03-01

对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面： entry 、 output 、 mode 、 resolve 、 module 、 optimization 、 plugin 、 source map 、 performance 等，本文就来重点分析下这些部分。

01

webpack 单独打包指定JS文件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/78472535

07

vue ---webpack 打包上线

1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。　　2、打包好的静态资源均是绝对路径，无法引入进项目，也是 404。

02

模块引用方式利弊辨析：全局绝对引用(alias) && 长相对引用

你一定知道，webpack中有个叫做alias的配置属性，可以帮助我们搞全局引用配置。比如说，在webpack.config.js中配置相应的键值对，我们就可以通过require(‘util’) 这种方式，而非require(‘../../../util’)这种方式，去做引用。

01

webpack使用优化（基本篇）

根据文章内容总结的摘要

vue-router根据环境改变动态加载组件

在webpack的新特性中支持组件的懒加载，也就是说我们可以在加载到该路由的时候再把这部分脚本进行加载，同时这个在项目进行打包的时候，对应的文件也会被单独打包，对于首屏优化以及其他页面的资源加载优化都是非常好的。这也要求我们在每个页面组件使用组件的时候尽量按需引入，提升体验。

02

如何使用prerender-spa-plugin插件对页面进行预渲染

文主要是介绍使用prerender-spa-plugin插件在针对前端代码进行预渲染。

03

Vue项目本地开发完成部署到服务器后报404，这到底是什么原因呢？

在进行Vue项目开发时，我们通常会先在本地进行开发和调试，然后将开发完成的代码部署到服务器上来让其他人访问。然而，在将Vue项目部署到服务器后，有时候会遇到一些问题，其中之一就是404错误。

00

webpack-图片路径问题

例如, 打包之后的路径是, images/BNTang.jpg, 那么在 html 中, 会去 html 文件所在路径下找 images, 正好能找到所以不报错, 但是在 css 中, 会去 css 文件所在路径下找 images, 找不到所以报错，目录结构示例如下：

00

前端构建工具 webpack 笔记

1、需求：封装 utils 包，校验手机号长度和验证码长度，在 src/index.js 中使用并打包观察

01

RocketMQ1_在Linux下的安装

一、rocketmq的安装 1.打开rocketmq官网下载 📷 下载后上传至服务器 # 或者使用git git clone -b develop https://github.com/apache/incubator-rocketmq.git* 2.解压/编译 # 此处上传至了 /usr/software/mq/rocketmq路径下 unzip rocketmq-all-4.8.0-source-release.zip # 进入解压后的文件夹后执行 mvn -Prelease-all -DskipT

04

前端项目路径别名终极解决方案

一个前端项目通常会演变成复杂的嵌套目录结构。因此，使用相对路径导入可能会变得更长且更混乱，这可能会对代码的外观产生负面影响，并让辨识代码的来源变得更加困难，更加重要的是代码文件位置变动相对路径就得改变。

01

Vue处理静态资源及public/static/assets目录的区别

1、在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

09

Vue处理静态资源及public/static/assets目录的区别

1、在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

02

【腾讯课堂】基于Kbone使用React同构小程序开发实践总结

导语：Kbone 是微信推出的 Web 与小程序同构解决方案，该方案现已支持 Vue、React 等同构本文目录一览： 1. 背景 2. 框架选择 3. React-Kbone-Miniprogram 过程 4. 接入现有工程 4.1 构建配置 4.1.1 Babel 4.1.2 Tree Shaking 4.1.3 与小程序代码复用 4.2 代码编写 4.2.1 小程序、H5 公共库适配 4.2.2 op

02

Vue引入静态资源

1、在js被导入或者在vue的template以及css中通过相对路径引入的，这样会被webpack处理

02

webpack 基础知识整理

webpack是一个模块打包工具，支持所有的打包语法，比如 ES Module、CommonJS、CMD、AMD。初期的webpack是用来模块打包js的，发展到现在，已经可以打包很多种文件类型，比如 css、img 。

02

显微镜下的webpack4：路径操作

对于打包工具来说，最简单也是最复杂的操作莫过于路径的安排了，原本都在src下的资源，想要打包到dist目录下，但是打包出来的文件路径甚不如人意。明明想要分门别类地放置文件文件，然后却像大杂烩一样js,html，css甚至图片都混在了一起。虽然打包之后运行没什么问题，但是这是要逼死强迫症患者啊。

02

Nest集成Swagger并部署至YAPI

前几天在项目中集成了swagger，一切准备就绪打算将其部署到服务器时发现并不顺利，访问的时候页面白屏，由于我的nest项目采用的是单文件部署，互联网上没有找到相关的解决方案，于是我就成了第一个吃螃蟹的人。

04

【Hybrid开发高级系列】WebPack模块化专题

如今，越来越多的JavaScript代码被使用在页面上，我们添加很多的内容在浏览器里。如何去很好的组织这些代码，成为了一个必须要解决的难题。

05

webpack中的模块(modules)

在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。

01

Webpack 实用技巧高效实战

在项目中使用了一段时间的 Webpack ,得益于其多元的功能支持和配置定制，得到了很多本地编译和依赖管理的帮助。在搭建好配置和架构之后，开发过程中可以不再关注模块的组织、载入、转义、合并、精简、兼容等各种方面的工程问题，全部交给 Webpack 来处理。效率和体验都得到了不小的提升。本篇文章就是在对使用 Webpack 过程中的关键配置和方法做一些总结和沉淀。本文是一些零散的功能记录、关键点配置和 Tips，大部分从使用过程中总结而来，并不是手册翻译也不是入门讲解，正在入手 Webpack 或在使用中遇

09

学会webpack 高级配置与优化

所谓打包多页面，就是同时打包出多个 html 页面，打包多页面也是使用 html-webpack-plugin，只不过，在引入插件的时候是创建多个插件对象，因为一个html-webpack-plugin 插件对象只能打包出一个 html 页面。如:

03

Webapck5核心打包原理全流程解析

Webpack在前端前端构建工具中可以堪称中流砥柱般的存在，日常业务开发、前端基建工具、高级前端面试...任何场景都会出现它的身影。

03

Webapck5核心打包原理全流程解析

Webpack在前端前端构建工具中可以堪称中流砥柱般的存在，日常业务开发、前端基建工具、高级前端面试...任何场景都会出现它的身影。

02

Webpack 踩坑记 - 配置 externals 和 output

平时用 webpack 可能不会有太大问题，可一旦你开发的包被别人引用的时候，就会存在问题；我最近遇到这么一个场景耗费我很多时间去重新学习 webpack 的打包输出。

02

Sourcemap入门

本文介绍 webpack 构建 web 应用的时候生成 sourcemap 的相关基础知识。 sourcemap 不仅适用于 chrome 浏览器，也适用于其它很多现代浏览器，本文主要针对 chrome

02

使用Webpack5创建Vue2项目及优化

之前我们大多都是用Vue-Cli来创建项目，但是Vue-Cli已经停止更新了，并且Vue-Cli相当于一堆插件的集合体，我们想替换以下，或者想根据我们的项目优化以下，提升编译的性能，这时候可以自己用Webpack来配置项目。

01

Go语言：如何解决读取不到相对路径配置文件问题

分片0会是一串复杂的路径，原因是直接run go文件时会将文件转移到临时路径下，然后再进行编译和执行，如果直接执行编译后的文件就不一样了，此时分片0为执行文件的相对路径

02

腾讯 IMWeb 团队的前端构建秘籍

本文由 IMWeb 团队成员 eden 首发于腾讯内部 KM 论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。前言随着前端构架工具的不断发展，提供了很多提高我们的开发体验和开发效率的能力，同时构建已经成为前端技术栈中常见的技术。 webpack 也是众多构建工具中崭露头角一员，早期的 webpack 配置复杂难懂，随着其发展，相关配置也不断简化，性能也不断提高，但是对于深入使用的开发人员，通常它的默认配置并不适用于业务开发，需要针对自己业务调整适配。你对 webpack 了解多少？如何针对业务

03

【云+社区年度征文】webpack 学习笔记系列01-基础命令与常见配置

webpack 命令可以在 package.json 中的 script 字段中添加命令，再使用 npm 执行：

09

Webpack最佳实践

Webpack 可以看做是模块打包机，把解析的所有模块变成一个对象，然后通过入口模块去加载我们的东西，然后依次实现递归的依赖关系，通过入口来运行所有的文件。由于 webpack 只认识js，所以需要通过一系列的 loader 和 plugin 转换成合适的格式供浏览器运行。

02

webpack 高级配置与优化，让你的项目飞起来

“ 关注前端开发社区，回复 '领取资源'，免费领取Vue，小程序，Node Js，前端开发用的插件以及面试视频等学习资料，让我们一起学习，一起进步

03

一张图呈现前端模块演化历史

在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

04

Webpack优化——将你的构建效率提速翻倍

随着构建体系不断完善、构建体验不断优化，webpack 已经逐渐成为了前端构建体系的一大霸主，对于工作中的真正意义上的前端工程项目，webpack 已经成为了我们前端构建技术选型的不二选择，包括 create-react-app 以及 vue-cli 等等业内常见的脚手架工具的构建体系，也都是基于 webpack 进行了上层封装。但随着业务代码不断增加，项目深度不断延伸，我们的构建时长也会因此不断增加。渐渐的，总会有人抛出这样的结论：webpack 构建太慢了、太“重”了。就以笔者本次近期为团队优化的项目为例，如下图所示，我们可以看到，随着项目的不断堆砌以及一些不正确的引用，团队内的项目单次构建时长已经达到了40s，这就造成了工程师如果需要重启 devServer 或者执行 build，都会造成很不好的体验。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭