开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

webpack或node是怎么知道如何从node_modules中挑选插件的？

webpack或node是通过模块解析的方式来知道如何从node_modules中挑选插件的。

在webpack或node中，模块解析是通过一系列的规则来确定模块的位置和加载方式。当遇到require或import语句时，它们会根据以下规则来解析模块路径：

相对路径解析：如果路径以./或../开头，表示相对于当前文件的路径，webpack或node会根据当前文件的位置来解析模块路径。
绝对路径解析：如果路径以/开头，表示绝对路径，webpack或node会直接根据该路径来解析模块。
模块路径解析：如果路径不是相对路径或绝对路径，webpack或node会将其视为模块路径，并按照一定的规则进行解析。
- 首先，它会在当前文件所在目录的node_modules文件夹中查找是否存在该模块。
- 如果在当前文件所在目录的node_modules中找不到该模块，则会逐级向上查找，直到找到项目根目录下的node_modules文件夹。
- 如果在项目根目录下的node_modules中仍然找不到该模块，则会报错。

通过以上规则，webpack或node能够准确地找到需要引入的插件或模块，并进行加载和使用。

对于webpack来说，它还可以通过配置文件中的resolve.modules选项来指定额外的模块搜索路径，以便更灵活地解析模块路径。

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

云开发（Serverless）：https://cloud.tencent.com/product/scf
云函数（Serverless）：https://cloud.tencent.com/product/scf
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能机器学习平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
移动应用开发平台（MPS）：https://cloud.tencent.com/product/mps
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse
腾讯云直播（CSS）：https://cloud.tencent.com/product/css

相关搜索:Gradle -我如何知道哪个插件是从哪个插件引入的？Webpack +快报:如何从服务器端服务/node_modules中的静态资源 webpack -如何处理node_modules文件夹中的文件 Webpack是如何在node_modules中找到包的在swift 5中，我如何知道图片是否真的是从url下载的？如何从另一个函数发送请求promise resolve响应，该函数是从Node.js中请求promise内部调用的如何从我的nuxt js组件的node_modules文件夹中动态加载svg图标？如何从我自己的Laravel项目包中请求node_modules 如何在getStaticProps或getStaticPaths中从请求的页面中获取插件如何在Vaadin应用程序中配置webpack.config.js？从node_modules导入CSS / PNG (Leaflet库)

相关搜索:

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

有帮助

没帮助

相关·内容

Webpack 打包优化之速度篇

在前文 Webpack 打包优化之体积篇中，对如何减小 Webpack 打包体积，做了些探讨；当然，那些法子对于打包速度的提升，也是大有裨益。...但是默认的配置，会采用向上递归搜索的方式去寻找，但通常项目目录里只有一个 node_modules，且是在项目根目录，为了减少搜索范围，可以直接写明 node_modules 的全路径；同样，对于别名(...如果配置 Webpack 来排除 node_modules，那么它将从 dist 已经编译的目录中获取文件。否则会再次编译它们。...Happypack 的处理思路是：将原有的 webpack 对 loader 的执行过程，从单一进程的形式扩展多进程模式，从而加速代码构建；原本的流程保持不变，这样可以在不修改原有配置的基础上，来完成对编译过程的优化...cacheDirectory=true），node_modules/.cache/babel-loader 则 node_modules 在任何根目录中找不到任何文件夹时，加载程序将使用默认缓存目录或回退到默认的

1.6K2 0

89.精读《如何编译前端项目与组件》

2 精读核心思想只有一句话：利用 webpack-node-externals 忽略 Webpack 对指向 node_modules 的 require 或 import 语句：进行项目/组件调试时...进行组件编译时，开启 production 模式，且利用 webpack-node-externals 插件忽略 node_modules。...同时上述三个场景都在复用 webpack 一套代码的基础上，利用了 webpack 的生态，因此维护性和拓展性都很强。后续再加入新功能，再也不需要到处找 babel 或 gulp 的插件了！...3 总结本文从 webpack 为切入点，但其实还可以从 parcel 或 gulp 为切入点，实现前端项目、组件构建体系的统一。...不过从可定制性来看，webpack 插件生态更完善，所以笔者选择了 webpack。留下一个思考题：你的项目、组件是如何构建的呢？是用了一套代码，还是两套呢？

1K2 0

不会手写vue-cli脚手架，leader竟要辞退我！

我觉得，官方提供的vue-cli脚手架很友好，不用想vue+webpack的工作流怎么搭建，vue-loader 和 css-module怎么配置，如何安装使用eslint和editorconfig等，...经此事后，我开始不满足于一直写业务代码，我也想知道一个一个项目在破土动工前，前端leader是怎么搭建一个前端项目的工作流的，如何去手动配置一个具体项目的webpack打包文件，包括后期的SSR，服务端渲染...举个例子：在webpack4.0中，如何使用extract-text-webpack-plugin配置css单独分离打包，以及如何解决在升级过程中碰到的一些坑？...\node_modules\webpack\lib\Chunk.js:460:9) at E:\***\myproject\webpack-vue-elementUi\node_modules...:\***\myproject\webpack-vue-elementUi\node_modules\extract-text-webpack-plugin\dist\index.js:171:18 这个问题的解决办法

1K1 0

从源码窥探Webpack4.x原理

如今，Webpack可谓是JavaScript社区最伟大的项目之一。本文力争从源码层面窥探Webpack的实现原理。...文章过长，记得点赞收藏～单押X2 Webpack本质 Webpack的本质是什么呢？可能有的同学已经知道了， Webpack本质上一种基于事件流的编程范例，其实就是一系列的插件运行。...Tapabel Tapabel是一个类似于 Node.js 的 EventEmitter 的库，主要是控制钩子函数的发布与订阅，是Webpack插件系统的大管家。...实际的入口文件是：node_modules/webpack/bin/webpack.js，让我们来看一下里面的核心函数。...compiler实例化是在node_modules/webpack/lib/webpack.js里完成的。通过EntryOptionPlugin插件进行参数校验。

8481 0

5-10~11 webpack 性能优化（2）

image.png 可以看到新增 node_modules 以后，vendors 体积和打包耗时都显著增加了。 4. dll 打包我们可以看到，node_modules 或造成打包耗时显著增加。...DLLReferencePlugin 是在 webpack 主配置文件中设置的，这个插件把只有 dll 的 bundle(s)(即：dll-only-bundle(s)) 引用到需要的预编译的依赖。...监听变动自动构建：每当更改插件的配置，安装或删除一个 node_module 时，AutoDllPlugin 将重新构建dll。...内存：当使用Webpack的Dev服务器时，包被加载到内存中，以防止从文件系统进行不必要的读取。...下面我们看下如何来使用：首先安装该插件，这里要注意 webpack4 和 webpack2/3 安装的版本并不一样。

1.2K1 0

webpack4配置详解之慢嚼细咽

经常会有人会问起 webpack、 react、 redux、甚至 create-react-app配置等等方面的问题，有些是我也不懂的，慢慢从大家的相互交流中，也学到了不少。　　...今天就尝试着一起来聊聊 Webpack吧，旨在帮大家加深理解、新手更容易上路，都能从0到1搭建配置自定属于自己的脚手架，或对已封装好的脚手架有进一步的巩固，接下来苏南会详细讲解 webpack中的每一个配置字段的作用...Entry - 这个不用解释了，看名字就是知道，它就是通往天堂/地狱的入口，一切的苦难从这里开始，也从这里结束。...， output就是审判官，决定着你是上天堂还是入地狱； - 指示 webpack 如何去输出、以及在哪里输出、输出的格式等； - path: 输出文件的目录， - filename:输出的文件名，...—— chunks: 'async'，它有三个值：all,async,initial //环境变更也可以直接在启动中设置 //webpack --env.NODE_ENV=local --env.production

7305 0

你可能不知道的9条Webpack优化策略

本文以我自己的经验向大家分享如何通过一些分析工具、插件以及webpack新版本中的一些新特性来显著提升webpack的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。...webpack 有时候打包很慢，而我们在项目中可能用了很多的 plugin 和 loader，想知道到底是哪个环节慢，下面这个插件可以计算 plugin 和 loader 的耗时。...大家都知道 webpack 是运行在 node 环境中，而 node 是单线程的。...这个插件是在webpack.config.js中使用的，该插件的作用是把刚刚在webpack.dll.js中打包生成的dll文件引用到需要的预编译的依赖上来。什么意思呢？...❞ hard-source-webpack-plugin HardSourceWebpackPlugin 为模块提供了中间缓存，缓存默认的存放路径是: node_modules/.cache/hard-source

1.6K3 0

从零开始学VUE之Webpack(Html打包插件的使用)

打包html文件的插件目前我们的index.html一致是在项目的根目录下的我们知道,在真实发布项目的时候,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index,html,那么打包的...(D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\webpack\lib\webpack.js:33:19... (D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\webpack\bin\webpack.js...开始学VUE\simpleplugin> 看到的错误大概是不能读取属性中的 initialize方法,是一个没有定义的,经过查看源码,发现在最新的版本中确实没有这个方法了,后来看了下老师的版本是3.2.0...可以看到是有index.html的 ? 并且也是有id="app"的div的自动插入了script标签,运行一下dist中的html ?

7612 0

轻松理解webpack热更新原理

HMR作为一个Webpack内置的功能，可以通过HotModuleReplacementPlugin或--hot开启。那么，HMR到底是怎么实现热更新的呢？下面让我们来了解一下吧！...，浏览器是如何知道本地代码重新编译了，并迅速请求了新生成的文件？是谁告知了浏览器？浏览器获得这些文件又是如何热更新成功的？那让我们带着疑问看下热更新的过程，从源码的角度看原理。...'xxx/node_modules/webpack-dev-server/client/index.js?...入口文件还有一个文件没有讲到，就是： 'xxx/node_modules/webpack/hot/dev-server.js' 这个文件的代码同样会被打包到bundle.js中，运行在浏览器中...7. moudle.hot.check 开始热更新通过第 6 步，我们就可以知道moudle.hot.check方法是如何来的啦。那都做了什么？

2.7K3 0

搭建webpack项目框架

，想法其实也很简单： 1、新建2个同级目录，一个是webpack（项目源目录），一个是 build（打包之后的项目的目录）； 2、通过运行不同的命令（主要是命令最后面的项目名称不一样），将项目从webpack...webpack.prod.js webpack.test.js package-lock.json 说明： node_modules：安装好的包。...，以及是怎么实现的？...是这样的：我们在使用 npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，他们是：--save-dev 或 --save。...13、.gitignore 就是将不想上传的文件或文件夹上传到仓库里，比如 npm install 生成的巨大无比的 node_modules。

2.3K4 0

手把手教你撸一个 Webpack Loader

那这个「魔术」的过程是如何实现的呢？今天我们从 webpack 的核心概念之一 —— loader 来寻找答案，并着手实现这个「魔术」。...本质上来说，loader 就是一个 node 模块，这很符合 webpack 中「万物皆模块」的思路。既然是 node 模块，那就一定会导出点什么。...知道它的强大功能以后，我们要怎么使用 loader 呢？ 1. 配置 webpack config 文件既然 loader 是 webpack 模块，如果我们要使其生效，肯定离不开配置。...在异步 loader 中你可以通过抛错来处理异常情况。Webpack 建议我们返回 1 至 2 个参数，第一个参数是转化后的 source，可以是 string 或 buffer。...既然是串联，那肯定有顺序的问题，webpack 规定 use 数组中 loader 的执行顺序是从最后一个到第一个，它们符合下面这些规则：顺序最后的 loader 第一个被调用，它拿到的参数是 source

1K4 0

正确的Webpack配置姿势，快速启动各式框架！

入口(entry) 将您应用程序的入口起点认为是根上下文(contextual root)或app第一个启动文件。...一般来说，在Angular中我们将是启动.bootstrap()的文件，在Vue中则是new Vue()的位置，在React中则是ReactDOM.render()或者是React.render()的启动文件...当然这些都需要安装，你选择了对应的转码规则也要安装相应的依赖： 1 npm install --save-dev babel-preset-latest 2. ts-loader 一看就知道，是个typescript...== 'string') {return false;}return userRequest.indexOf('node_modules') >= 0; // 是否位于node_modules里} 3...ExtractTextPlugin 可以将样式从js中抽出，生成单独的.css样式文件（同样因为方便调试[捂脸+1]）。

1.5K3 0

webpack实战——预处理器(loader)【下篇】

ES6+代码示例当然，知道了参数，也需要根据loader文档注意一些小细节，例如： rules: [ { test: /\.js$/, exclude: /node_modules...babel-loader支持从.babelrc文件读取Babel配置，因此也可以将presets和plugins从Webpack配置文件中提取出来，也能达到相同效果。...test: /\.ts$/, use: 'ts-loader' } ] 说明学习或使用过typescript的开发者都知道，typescript的配置信息在工程目录下的tsconfig.jsson...回归本质，loader就是一个函数，能够处理相应功能的函数。第一个loader是源文件，之后所有loader是上一个loader的输出，最后一个loader则是输出给webpack。...下一篇介绍webpack中对样式处理的模块。

1K1 1

babelrc在哪里？

但是在web目录下进行webpack构建的时候，因为用到了components的目录，所以babel-loader就直接使用了根目录的配置，因为babel查找的是被转换代码的当前目录，而不是运行的当前目录...但是从我的webpack配置中，大家可以发现，我竟然还要对路径进行resolve?这是有必要的吗？有的。。。因为babel plugin或者preset都会先从被转换文件的当前目录进行模块的查找。...这是server目录下的故事。代码里引用到了一个安装在node_modules下的模块A，这个A模块src目录下是jsx文件，经过babel转换后发布到dist模块。...但是，我惊讶的发现，不知道怎么给这些插件配置选项呀。不过，我旋即也发现，还有个--presets。presets，直译即是预配置，我们就常常用到各种presets 如 es2015,react。...那么，我自定义一些preset也就能解决我的问题了。 babel node_modules/A/dist --out-dir node_modules/A/dist --presets=.

1.8K2 0

【学习笔记】尚硅谷Webpack5入门到原理 | 高级篇

是什么顾名思义就是只能匹配上一个 loader, 剩下的就不匹配了。怎么用将rules中配置oneof数组，数组中存放匹配值。...而这些文件是不需要编译可以直接使用的。所以我们在对 js 文件处理时，要排除 node_modules 下面的文件。...是什么Tree Shaking 是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。注意：它依赖 ES Module。怎么用Webpack 已经默认开启了这个功能，无需其他配置。...是什么image-minimizer-webpack-plugin: 用来压缩图片的插件怎么用下载包npm i image-minimizer-webpack-plugin imagemin -D还有剩下包需要下载...\node_modules\optipng-bin\vendor\optipng.exe ENOENT我们需要安装两个文件到 node_modules 中才能解决, 文件可以从课件中找到：jpegtran.exe

3.1K2 0

webpack4配置详解之慢嚼细咽

[webpack4配置详解之慢嚼细咽] 前言　　经常会有群友问起webpack、react、redux、甚至create-react-app配置等等方面的问题，有些是我也不懂的，慢慢从大家的相互交流中...今天就尝试着一起来聊聊Webpack吧，旨在帮大家加深理解、新手更容易上路，都能从0到1搭建配置自定属于自己的脚手架，或对已封装好的脚手架有进一步的巩固，接下来苏南会详细讲解webpack中的每一个配置字段的作用...，output就是审判官，决定着你是上天堂还是入地狱；指示 webpack 如何去输出、以及在哪里输出、输出的格式等； path: 输出文件的目录， filename:输出的文件名，它一般跟你entry...chunks: 'async'，它有三个值：all,async,initial //环境变更也可以直接在启动中设置 //webpack --env.NODE_ENV=local --env.production...， modules：webpack 解析模块时应该搜索的目录，其他 plugins、unsafeCache、enforceExtension，基本没有怎么用到， //extensions 后缀可以省略

6404 0

babelrc在哪里？

但是在web目录下进行webpack构建的时候，因为用到了components的目录，所以babel-loader就直接使用了根目录的配置，因为babel查找的是被转换代码的当前目录，而不是运行的当前目录...但是从我的webpack配置中，大家可以发现，我竟然还要对路径进行resolve?这是有必要的吗？有的。。。因为babel plugin或者preset都会先从被转换文件的当前目录进行模块的查找。...这是server目录下的故事。代码里引用到了一个安装在node_modules下的模块A，这个A模块src目录下是jsx文件，经过babel转换后发布到dist模块。...但是，我惊讶的发现，不知道怎么给这些插件配置选项呀。不过，我旋即也发现，还有个--presets。presets，直译即是预配置，我们就常常用到各种presets 如 es2015,react。...那么，我自定义一些preset也就能解决我的问题了。 babel node_modules/A/dist --out-dir node_modules/A/dist --presets=.

2.3K9 0

从0到1开启一个全新的TypeScript项目

接下来我们从以下三个方面来介绍我们是如何开启一个全新的 TypeScript 项目的：项目配置和目录设计方案，以及一些常见问题的处理方案。...“include”的默认值是当前目录及其子目录下的所有 TypeScript 文件，“exclude”默认情况下会排除 node_modules、bower_components、jspm_packages...typeRoots 然后是 typeRoots，它默认值是 node_module 下的 @type，以及各个子路径下的 node_modules /@types。...比如项目中会引入许多第三方库，而这些库是基于 JavaScript 开发的，通常这些库的类型声明文件会放到 node_modules/@type 下。...公共组件 / 通用方法的某些参数类型还有一类是公共组件或者通用方法的某些参数的类型，从右边的代码中可以看到，这里的 TreeSelect 有一个属性是 flatOptions, 它的类型就是左侧定义的

5601 0

webpack学习笔记（原理，实现loader和插件）

输出文件分析虽然在前面的章节中你学会了如何使用 Webpack ，也大致知道其工作原理，可是你想过 Webpack 输出的 bundle.js 是什么样子的吗？...Loader 将会很麻烦，因为你需要确保编写的 Loader 的源码是在 node_modules 目录下。...在开发插件时，你可能会不知道该如何下手，因为你不知道该监听哪个事件才能完成任务。...在开发插件时，还需要注意以下两点：只要能拿到 Compiler 或 Compilation 对象，就能广播出新的事件，所以在新开发的插件中也能广播出事件，给其它插件监听使用。...即 Node.js 的执行入口文件，设置为 Webpack 的执行入口文件 node_modules/webpack/bin/webpack.js。

1.6K3 0

入门webpack(下)

插件（Plugins）插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。...使用插件的方法要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）继续看例子，我们添加了一个实现版权声明的插件...bundled JavaScript file 知道Webpack中的插件如何使用了，下面给大家推荐几个常用的插件 HtmlWebpackPlugin 这个插件的作用是依据一个简单的模板，帮你生成最终的...，还需要在你的JS模块中执行一个Webpack提供的API才能实现热加载，虽然这个API不难使用，但是如果是React模块，使用我们已经熟悉的Babel可以更方便的实现功能热加载。...整理下我们的思路，具体实现方法如下 Babel和webpack是独立的工具二者可以一起工作二者都可以通过插件拓展功能 HMR是一个webpack插件，它让你能浏览器中实时观察模块修改后的效果，但是如果你想让它工作

8546 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭