首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Webpack看不到绝对路径

是由于Webpack的配置问题导致的。Webpack是一个现代JavaScript应用程序的静态模块打包工具,它通过创建依赖关系图,将所有模块打包成一个或多个bundle文件。

解决Webpack看不到绝对路径的方法有以下几种:

  1. 配置resolve.alias:在Webpack的配置文件中,可以通过resolve.alias来设置模块的别名,将绝对路径映射为一个更短的名称。这样在引用模块时,可以使用别名代替绝对路径,从而解决看不到绝对路径的问题。例如:
代码语言:txt
复制
const path = require('path');

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') // 将绝对路径/src映射为@
    }
  }
};
  1. 使用resolve.modules:在Webpack的配置文件中,可以通过resolve.modules设置模块的查找路径。将包含所需模块的目录添加到resolve.modules中,Webpack会在这些目录中查找模块,从而解决看不到绝对路径的问题。例如:
代码语言:txt
复制
module.exports = {
  // ...
  resolve: {
    modules: ['src', 'node_modules'] // 将src目录添加到查找路径中
  }
};
  1. 配置resolve.extensions:在Webpack的配置文件中,可以通过resolve.extensions设置模块的扩展名。将常用的模块扩展名添加到resolve.extensions中,Webpack会在引用模块时自动补全扩展名,从而解决看不到绝对路径的问题。例如:
代码语言:txt
复制
module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.jsx', '.json'] // 添加常用的扩展名
  }
};

以上方法可以解决Webpack看不到绝对路径的问题,提高开发效率和代码可维护性。

推荐的腾讯云相关产品:腾讯云Serverless云函数(SCF),腾讯云对象存储(COS),腾讯云内容分发网络(CDN),腾讯云人脸识别(FRT),腾讯云数据库MySQL版,腾讯云区块链服务(BCS)。

腾讯云产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • webpack(6)webpack处理图片

    图片处理url-loader(webpack5之前的处理方式) 在项目开发中,我们时长会需要使用到图片,比如在img文件夹中有图片test1.png,然后在normal.css中会引用到图片 body{.../img/test1.png"); } 但是此时,我们直接使用webpack打包是会报错的,我们需要安装url-loader,它是用于将文件转换为 base64 URI 的 loader。...接着我们在webpack.config.js中配置url-loader的设置 module.exports = { module: { rules: [ { test...图片字体之类的资源的时候等,需要用到url-loader,file-loader,raw-loader,webpack5则放弃了这三个loader,这三个loader在github上也停止了更新。...webpack5使用四种新增的资源模块(Asset Modules)替代了这些loader的功能。

    88810

    webpack

    首先是官方文档:https://webpack.docschina.org/ 本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。...当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容...接下来我们跟着快速上手一下,将一个普通的html文件使用webpack改造 https://webpack.docschina.org/guides/getting-started 创建目录,安装依赖...mkdir webpack-demo cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev 新建index.html...--config webpack.config.js 我们在package.json中新建一个脚本 { "name": "simple-webpack", "version": "1.0.0"

    54910

    Webpack

    关于webpack和node和npm的关系 四.关于Webpack的一个简单应用 五.webpack.config.js配置和package.json配置 六.webpack中使用css文件的配置...需要定制,这里出口要指定一个绝对路径而不是相对路径(代码中是错误的),但是直接黏贴肯定不好,不方便,而且回头更改位置也会出错,因此我们可以用package.json module.exports={...package.json就有了,我们可以调用path.resolve(__dirname,'dist'),其中__dirname前面是双下划线,它是一个全局变量可以拿到我们package.json文件所在的绝对路径...,path.resolve(__dirname,'dist')可以将他们拼接在一起构成一个完成的绝对路径. const path=require("path") module.exports={...,所以写一个字符串即可 出口:通常是一个对象,里面至少包含两个重要属性,path和filename 注意:path通常是一个绝对路径 有的时候我们开发某个项目需要特定版本的webpack,那么我们可以在该项目包下执行

    1K30

    前端技术 Webpack(学习 Webpack 的原因,Webpack 快速入门)

    现代化前端开发工作,离不开 Webpack 相关技术栈,是提升前端生产力的利器 Webpack 在前端项目中实践模块化思想 Webpack 本质上是一个模块化打包工具,它通过“万物皆模块”这种设计思想,...: npm init --yes npm i webpack webpack-cli --save-dev webpackWebpack 的核心模块,webpack-cli 是 Webpack 的...这里我们使用的 Webpack 版本是 v4.42.1,有了 Webpack 后,就可以直接运行 webpack 命令来打包 JS 模块代码,具体操作如下: $ npx webpack 这个命令在执行的过程中...更多 Webpack 相关的配置可以在 Webpack 的官网中找到:https://webpack.js.org/configuration/#options 让配置文件支持智能提示 因为 Webpack.../webpack.config.js // 一定记得运行 Webpack 前先注释掉这里。

    1.8K40

    webpack

    我们常说的Module是什么 webpack支持 ESModule, CommonJS, AMD, Assests 如何表达各种依赖关系? 我们常说的chunk和bundle的区别是什么?...Chunk 是Webpack打包过程中Modules的集合,是打包过程中的概念。 Webpack的打包是从⼀个⼊⼝模块开始,⼊⼝模块引⽤其他模块,模块再引⽤模块。...Webpack通过引⽤关系逐个打包模块,这些module就形成了⼀个Chunk。 当然如果有多个⼊⼝模块,可能会产出多条打包路径,每条路径都会形成⼀个Chunk。...Loader 模块转换器,将非js模块转化为webpack能识别的 Plugin 扩展插件,webpack各个阶段都会广播出对应的事件 Compiler 对象,也可以理解为webpack的实例 Compliation...模块资源 简单描述一下打包过程 初始化参数:shell webpack.config.js 开始编译 确定入口 编译模块 完成模块编译 输出资源

    34010

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券