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

Webpack是如何在node_modules中找到包的

Webpack是一个模块打包工具,用于将项目中的各个模块(包括JavaScript、CSS、图片等)打包成一个或多个静态资源文件。Webpack的工作原理是基于模块的依赖关系图进行打包。

在Webpack中,当使用importrequire语句导入一个包时,Webpack会按照一定的规则去node_modules中查找对应的包。

Webpack的查找规则如下:

  1. 首先,Webpack会在项目的根目录下查找是否存在node_modules文件夹。
  2. 如果存在node_modules文件夹,Webpack会根据导入包时的路径去node_modules中查找对应的包。
    • 如果导入包时的路径以/开头,则Webpack会从项目的根目录下开始查找。
    • 如果导入包时的路径以./../开头,则Webpack会从导入包文件所在的目录开始查找。
  • 如果找到了对应的包,则Webpack会将该包作为一个模块进行打包。
  • 如果在node_modules中找不到对应的包,则Webpack会递归地向上级目录查找,直到根目录。
  • 如果在整个项目的目录结构中都找不到对应的包,则Webpack会抛出错误,表示找不到该包。

Webpack中找到包后,会根据配置文件中的规则对其进行处理和打包。可以通过配置文件中的resolve选项来配置Webpack的查找规则,例如可以指定Webpack只查找特定的目录或文件。

注意:上述规则是Webpack的默认规则,可以根据项目的实际情况进行配置和定制化。腾讯云的相关产品中,推荐使用Webpack进行前端项目的打包和优化,具体产品和使用方法可以参考腾讯云官网的Webpack文档

相关搜索:如何让typescript + webpack + vuejs在我的node_modules/older/lib/目录中找到包?webpack或node是怎么知道如何从node_modules中挑选插件的?如何调试webpack捆绑包文件错误,并在包含千号的捆绑包中找到确切的错误。reactJs中的行数如何在Typescript中找到函数参数是实例的子类?assets路径是指安装包中的主应用程序,是指在webpack构建之后如何在javascript中找到用户选择的是向前还是向后?如何在C#中找到arraylist是单维还是多维的?如何在MOB树的每个节点中找到观察值?(partykit包)如何在numpy数组中找到由0包围的1的区域?如何在rails应用程序的webpack包中定义全局javascript方法如何在autodesk forge的模型衍生API中找到autocad文件上的“闭包”数?如何在剃刀页面中使用来自webpack捆绑包的Vue.js代码?typegoose:如何在typegoose中找到导演或制片人是Michael bay的电影如何在运行时从由webpack构建的包中请求外部commonjs模块角度2 webpack如何在不使用npm包的情况下引用本地js库苹果的Swift雪碧包: linearDamping,这个属性是如何在数学上使用的?如何在包中使用经过编辑的列(它显示的是经过编辑的值)如何在selenium 2 WebDriver中找到当前使用的窗口是最大化还是最小化?如何在Next.js中使用自定义的webpack配置为Sentry (@sentry/nextjs包)提供'cmd‘?如何在使用webpack的angular应用程序中将所有的包文件合并成一个单独的js?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在腾讯实践webpack优化

这次文章主题webpack」,将叙述我在腾讯QAPM项目中进行前端工程化实践,前方高能预警⚠️ 阅读本文,你将会了解到 Webpack4->Webpack5升级指南 Webpack优化实战 值得注意...插件进行生产环境下编自动上传,然而遗憾webpack-cos-plugin最新版也只支持到webpack4,在这种情况下我们只能替换插件。...3.2.1 lodash优化 由于lodash一个UMD规范,所以默认做全量引入 我们可以通过LodashModuleReplacementPlugin来移除你未用到lodash特性 3.2.2...(一般拆一下node_modules) 对于这里规则,将只说只说一些重点 minChunks:引用阈值,被引用次数超过该阈值模块才会被拆处理; maxInitialRequest/maxAsyncRequests...:用于限制Initial/Async Chunk最大并行请求数,本质上在限制最终产生分包数量; minSize: 超过这个大小 Chunk 会被拆; maxSize: 超过这个大小 Chunk

60820

2018 年了,你还是只会 npm install 吗?

node_modules/ ├── nconf/ └── webpack/ 进入更深一层 nconf 或 webpack 目录,将看到这两个各自 node_modules 中,已经由 npm 递归地安装好自身依赖...,并且相同版本。.../node_modules 和 nconf/node_modules 中都不再有 async 文件夹,但得益于 node 模块加载机制,他们都可以在上一级 node_modules 目录中找到 async...npm 文档提供了更直观例子解释这种情况: 假如 package{dep} 写法代表依赖,那么 A{B,C}, B{C}, C{D} 依赖结构在安装之后 node_modules 这样结构...获取名 npm_package__ - package.json 中嵌套字段属性: npm_pacakge_dependencies_webpack 可以获取到 package.json

6.6K160
  • 使用 webpack 4 和 Babel 7 构建 React 应用及如何引入 Material Design

    有很多客户询问如何在 Webpack 上迁移我们产品模板。 在多次要求求之后,我们写了这个关于如何开始使用 React with Webpack 4和 Babel 7 小教程。...package.json 文件只能锁定大版本,也就是版本号第一位,并不能锁定后面的小版本,你每次 npm install 都是拉取该大版本下最新版本,为了稳定性考虑我们几乎不敢随意升级依赖...所以当我们 npm install 安装完插件后,都会生成两个文件一个 node_modules 和 package-lock.json 。...=production webpack", 4.resolve webpack 在构建时候会按目录进行文件查找,resolve 属性中 extensions 数组中用于配置程序可以自行补全哪些文件后缀...我们不需要 Material Dashboard React 所有依赖项,因为我们使用 Webpack 构建了自己服务器。 除了产品本身,我们还添加了其他样式加载器。

    9.4K60

    SpreadJS使用进阶指南 - 使用 NPM 管理你项目

    这里,NPM简单介绍,希望能够帮您:NPM随同NodeJS一起发布包管理工具,也是目前用于管理node.js库最有效手段。...它能解决NodeJS代码部署上很多问题,常见使用场景有以下几种: 1.       允许用户从NPM服务器下载别人编写第三方到本地使用。 2.      ...本文中,我们将向您介绍如何在webpack项目中使用SpreadJS NPM。 安装Node.js和NPM 在使用该项目之前,请确保下载并安装Node.js和NPM。...--save npm install webpack-cli --save 这会将一个node_modules文件夹添加到项目中,这是我们获取Spread引用地址。...总结 本教程展示了在webpack项目中使用SpreadJS NPM多么容易。这只是一个开始,你可以在此基础上创建更高级项目。

    2.3K20

    Webpack构建速度优化

    /, },noParse对于我们引入一些第三方,比如jQuery,在这些内部肯定不会依赖别的,所以根本不需要webpack去解析它内部依赖关系,使用 noParse 进行忽略模块文件中不会解析...new webpack.IgnorePlugin({ resourceRegExp, contextRegExp });以moment为例,首先找到moment中语言所在文件夹,然后在webpack.../path/to/file';webpack在解析时候,就可以从我们设置扩展名中从左往右进行判断需要注意:高频文件后缀名放前面;手动配置后,默认配置会被覆盖参考webpack视频讲解:进入学习如果想保留默认配置...package.json文件中依赖库名称,而value值代表第三方依赖编译打包后生成js文件,然后js文件执行后赋值给window全局变量名称。...然后在它源代码里面找,类似与导出赋值这种代码缓存webpack5提供了非常强大持久化缓存能力,开箱即用catch缓存webpack5新加了缓存项配置,具体如下默认缓存路径在node_modules

    1.6K10

    Webpack构建速度优化指南

    /, },noParse对于我们引入一些第三方,比如jQuery,在这些内部肯定不会依赖别的,所以根本不需要webpack去解析它内部依赖关系,使用 noParse 进行忽略模块文件中不会解析...new webpack.IgnorePlugin({ resourceRegExp, contextRegExp });以moment为例,首先找到moment中语言所在文件夹,然后在webpack.../path/to/file';webpack在解析时候,就可以从我们设置扩展名中从左往右进行判断需要注意:高频文件后缀名放前面;手动配置后,默认配置会被覆盖参考 webpack面试题详细解答如果想保留默认配置...package.json文件中依赖库名称,而value值代表第三方依赖编译打包后生成js文件,然后js文件执行后赋值给window全局变量名称。...然后在它源代码里面找,类似与导出赋值这种代码缓存webpack5提供了非常强大持久化缓存能力,开箱即用catch缓存webpack5新加了缓存项配置,具体如下默认缓存路径在node_modules

    1.6K20

    webpack5热更新打包TS

    模块热替换(HMR - Hot Module Replacement) webpack 提供最有用功能之一。...ts-loader 本次热更新对应还需要多安装一个,叫做webpack-dev-server 安装命令: yarn add webpack-dev-server 我这四个版本(这里可以注意一下...写入位置为 output.path 配置目录 (writeToDisk我其实找了好久,才在官方文档中找到,泪目) devServer: { progress: false, // 命令行中会显示打包进度...,通过webpack进行热更新后时时打包生成typescript编译js文件就完成了 ---- 总结 这次热更新打包过程真的跌跌撞撞,一个萝卜一个坑。...本篇文章重点其实并不在于如何打包typescript,反而是在于如何配置webpack热更新devServer 关于如何在webpack5中配置typescript,我发现在官方网站上也有说明:https

    2.1K11

    入门webpack最佳实践(基于webpack4.X 5.X)--打包速度优化

    /, },noParse对于我们引入一些第三方,比如jQuery,在这些内部肯定不会依赖别的,所以根本不需要webpack去解析它内部依赖关系,使用 noParse 进行忽略模块文件中不会解析...import、require 等语法module:{ noParse:/jquery|lodash/}IgnorePlugin有很多第三方内部会做国际化处理,包含很多语言,而这些语言对我们来说时没有多大用处...以moment为例,首先找到moment中语言所在文件夹,然后在webpack配置文件中添加插件new webpack.IgnorePlugin(/..../path/to/file';webpack在解析时候,就可以从我们设置扩展名中从左往右进行判断需要注意:高频文件后缀名放前面;手动配置后,默认配置会被覆盖如果想保留默认配置,可以用 ......package.json文件中依赖库名称,而value值代表第三方依赖编译打包后生成js文件,然后js文件执行后赋值给window全局变量名称。

    1.1K20

    入门webpack最佳实践(基于webpack4.X 5.X)--打包速度优化

    /, }, noParse 对于我们引入一些第三方,比如jQuery,在这些内部肯定不会依赖别的,所以根本不需要webpack去解析它内部依赖关系,使用 noParse 进行忽略模块文件中不会解析...import、require 等语法 module:{ noParse:/jquery|lodash/ } IgnorePlugin 有很多第三方内部会做国际化处理,包含很多语言,而这些语言对我们来说时没有多大用处...new webpack.IgnorePlugin({ resourceRegExp, contextRegExp }); 以moment为例,首先找到moment中语言所在文件夹,然后在webpack.../path/to/file'; webpack在解析时候,就可以从我们设置扩展名中从左往右进行判断 需要注意: 高频文件后缀名放前面; 手动配置后,默认配置会被覆盖 如果想保留默认配置,可以用...package.json文件中依赖库名称,而value值代表第三方依赖编译打包后生成js文件,然后js文件执行后赋值给window全局变量名称。

    1K30

    Webpack 性能系列三:提升编译性能

    定位到对应体文件路径 node_modules/lodash/index.js ; import '....2.1 resolve.extensions 配置 当模块导入语句未携带文件后缀时, import '....这样 npm 导入语句时,会尝试先当前项目的 node_modules 搜索资源,如果找不到则按目录层级尝试逐级向上查找 node_modules 目录,如果依然找不到则最终尝试在全局 node_modules...三、跳过文件编译 有不少 npm 默认提供了提前打包好,不需要做二次编译资源版本,例如: Vue node_modules/vue/dist/vue.runtime.esm.js 文件 React...watchOptions: { ignored: /node_modules/ }, }; 六、跳过 TS 类型检查 JavaScript 本身一门弱类型语言,这在多人协作项目中经常会引起一些不必要类型错误

    1.3K20

    前端包管理工具 npm yarn cnpm npx

    属性 无论哪个环境都需要依赖资源 vue全家桶,axios devDependencies属性 本地开发环境需要依赖资源webpack,babel 安装命令为 npm install webpack...,Vue2.0和Vue3.0 Y 为次版本号 一般为新增一恶搞功能,向下兼容,Vue2.0和Vue2.x Z 为修订版本号 一般修复了小问题,小版本优化 我们常见版本号形如这样...^x.y.z:表示x保持不变,y和z永远安装最新版本; ~x.y.z:表示x和y保持不变,z永远安装最新版本; 依赖安装 安装分为全局安装和局部安装 npm yarn webpack...这样就适合全局安装 npm install webpack -g vue axios 这样项目中用就适合局部安装 安装之后会在当前目录下生成一个node_modules文件夹...之后自带一个命令,一般用于它来调用项目中某个模块 问题产生 我们以webpack为例: 全局安装webpack5 项目安装webpack3 如果我在终端执行 webpack --version

    86620

    webpack优化

    noParse oParse作用主要是过滤不需要解析文件,比如打包时候依赖了三方库 jquyer,而jquery一个单独库没有其他依赖,这个时候可以通过配置noParse不去解析文件,提高打包效率...node_modules里面的js文件 这个时候我们可以配置exclude和include设置排除文件和限定文件 ... rules:[ { test:/\.js$/...忽略第三方指定目录,让指定目录不要被打包进去 moment import moment from 'moment' //设置语言 moment.locale('zh-cn'); let r...我们排除了所有语言,这个时候页面不能正常显示中文 手动引入语言 import moment from 'moment' import 'moment/locale/zh-cn'; //设置语言...Webpack 单线程模型,所以Webpack 需要处理事情需要一件一件做,不能多件事一起做。

    34220

    前端新构建范式

    前端交付基于浏览器,资源通过增量加载方式运行到浏览器端,如何在开发环境组织好这些碎片化代码和资源,并且保证他们在浏览器端快速、优雅加载和更新,前端发展中一直探索难题。...前端模块发展历程:前端模块化系统 模块化发展到今天,其基本范式为:利用 bundle 工具( webpack)将源码打包成浏览器可识别的 bundle。 范式从本质上讲一种理论体系、理论框架。...解决思路: 从减少 webpack 模块数量角度考量,剔除 node_modules第三方依赖,仅对业务代码打包。...针对该方式常见方法将第三方库在 Webpack 构建时配置 External, HTML 中直接通过 Script 标签引入 UMD 产物。...使用 ESM 构建核心特点: node_modules 完全不需要参与到构建过程,构建效率提升明显 构建复杂度非常低,修改任何内容都只需做单文件编译(不需要重新构建和重新打包应用程序整个bundle

    77420

    走近webpack(5)--devtool及babel使用

    这是基础篇最后一章,这些文章只是罗列给大家讲解了在一些场景中webpack怎样使用,这章结束后会给大家讲解一下如何在我们实际开发及上线工作环境中自如使用webpack。   ...核心功能,babel-loader就不用说了,转换目标代码babel,babel-preset-env也就是转换es6语法,babel-preset-react就是转换JSX*/   安装完成之后...(更多配置信息可以查看webpack文档:https://doc.webpack-china.org/configuration/devtool/)   个人意见,如果大型项目可以使用source-map...,如果中小型项目使用eval-source-map就完全可以应对,需要强调说明,source map只适用于开发阶段,上线前记得修改这些调试设置。   ...OK,至此,webpack基本配置和使用方法就讲解完了。这个项目的相关demo已经上传到我github。大家可以查阅学习。但是我还是建议大家一定要自己跟着教程多练习。不然没什么实际效果

    78870

    前端新构建范式

    前端交付基于浏览器,资源通过增量加载方式运行到浏览器端,如何在开发环境组织好这些碎片化代码和资源,并且保证他们在浏览器端快速、优雅加载和更新,前端发展中一直探索难题。...前端模块发展历程:前端模块化系统 模块化发展到今天,其基本范式为:利用 bundle 工具( webpack)将源码打包成浏览器可识别的 bundle。 范式从本质上讲一种理论体系、理论框架。...解决思路: 从减少 webpack 模块数量角度考量,剔除 node_modules第三方依赖,仅对业务代码打包。...针对该方式常见方法将第三方库在 Webpack 构建时配置 External, HTML 中直接通过 Script 标签引入 UMD 产物。...使用 ESM 构建核心特点: node_modules 完全不需要参与到构建过程,构建效率提升明显 构建复杂度非常低,修改任何内容都只需做单文件编译(不需要重新构建和重新打包应用程序整个bundle

    63320

    vue项目环境搭建和运行

    Vue.js前端框架 公司项目分布式和前后端分离,所有功能持久化操作都是以服务组件方式和代码分开,后端接口使用jfinal框架,前段用就是bootstrap+vue.js啦,开发工具使用...由于有些npm有些资源被屏蔽或者国外资源原因,经常会导致用npm安装依赖时候失败,所有我还需要npm国内镜像---cnpm。...prod.env.js   ==>  生产环境变量;   3、node_modules:npm 加载项目依赖模块   4、src:这里我们要开发目录,基本上要做事情都在这个目录里。...不会被webpack构建   6、index.html:首页入口文件,可以添加一些 meta 信息等   7、package.json:npm配置文件,定义了项目的npm脚本,依赖等信息   8、...解决:     1)打开config  ==> index.js     2)module.exports配置中找到autoOpenBrowser,默认设置false,改为true     3)

    93620

    webpack处理lessloader_登录器和引擎版本号不匹配

    大家好,又见面了,我你们朋友全栈君。 There might be a problem with the project dependency tree....首先第一种 在第三步时候我并没有在package.json中找到webpack配置项,就跳过继续第四步,结果没解决 指定版本号下载 指定版本号全局卸载再下载 都不能解决 接着就注意到是不是npm i和.../node_modules/antd/es/button/style/index.less) TypeError: this.getOptions is not a function 我不理解 总之 最后解决方法...webpack@4.44.2时候package.json中不显示"webpack": "^4.44.2"难道我当时思绪混乱了一直想着全局问题,而这个局部安裝去解决我没有这样执行过,一直在npm i...后面加-g ——可能吧 接着第二步也可以在终端指定版本号下载,他就是来解决下面这个问题 .

    72220
    领券