Webpack 插件扫盲系列（五） PnpWebpackPlugin和ModuleScopePlugin

最新推荐文章于 2024-05-25 09:41:27 发布
最新推荐文章于 2024-05-25 09:41:27 发布
阅读量3.1k 收藏 1
点赞数 2
分类专栏： webpack node 前端技术 文章标签： Pnp webpack plugin ModuleScope
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29722281/article/details/112131739
版权
本文介绍了在Webpack中使用的PnpWebpackPlugin和ModuleScopePlugin。PnpWebpackPlugin是Yarn PnP（Plug'n'Play）的配套插件，用于简化在启用PnP时的模块解析。当不使用PnP或未启用相关设置时，该插件无效。ModuleScopePlugin则是防止引入源代码目录外的文件，确保所有文件都经过Babel转义，避免不可预期的结果。如果引入外部文件并确保已转义，可以不使用此插件。
摘要由CSDN通过智能技术生成

一、PnpWebpackPlugin

背景

什么是Pnp?可以详见本人的这篇博客。Pnp实际是yarn的一个特性，所以说如果你的项目中不使用yarn构建，那就可以不用使用这个插件。其次，即使你使用了yarn，如果不通过文中所述的开启pnp的方法去启用pnp，那这个插件对你来说也是无用的。

使用

大家知道webpack的reslove模块是用来配置模块解析规则的。如果你的项目中启用了pnp，那么想象一下，最基本的，就是你没有node_modules文件夹了。你的所有的依赖配置都会存储在.pnp.js文件中（实际依赖项安装在系统根目录），这就会使得你在项目中使用require或者import模块时，需要一些区别于普通的webpack引入的方式。PnpWebpackPlugin就可以使你在使用pnp的场景下，让你免于配置resolve，采用开箱即用的方式，让你不用担心你的require和import引入文件的正确性࿱

最低0.47元/天 解锁文章
追逐、
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack 插件扫盲系列（三） webpack.TerserWebpackPlugin、webpack.UglifyjsWebpackPlugin和ParallelUglifyPlugin
追逐丶的博客
11-04 5318
一、背景 这三种插件都是Webpack常用的压缩代码插件。这三者有什么不同？使用的时候有什么注意点？接下来我们一起探究一下。 一、webpack.UglifyjsWebpackPlugin 这个是Webpack官方维护，用Uglifyjs进行代码压缩的插件。它使用的是单线程压缩代码，也就是说多个js文件需要被压缩，它需要一个个文件进行压缩。所以说在正式环境打包压缩代码速度非常慢(因为压缩JS代码需要先把代码解析成用Object抽象表示的AST语法树，再去应用各种规则分析和处理AST，导致这个过程耗时非常大)
pnp-webpack-plugin:透明地将对即插即用的支持添加到Webpack
05-02
解析器 该插件还可以用于Jest（ ），Rollup（ ）和TypeScript（ ） 安装 yarn add -D pnp-webpack-plugin 用法 只需将插件添加到resolver和resolveLoader ： const PnpWebpackPlugin = require ( `pnp-webpack-plugin` ) ; module . exports = { resolve : { plugins : [ PnpWebpackPlugin , ] , } , resolveLoader : { plugins : [ PnpWebpackPlugin . moduleLoader ( module ) , ] , } , } ; resolve条目将负责正确解析程序所需的依赖项，
module-scope-plugin
05-13
ModuleScopePlugin 一个webpack 4版本的react-dev-utils ModuleScopePlugin
php调用pnp网页教程,pnp-webpack-plugin
weixin_39605521的博客
03-29 190
plug'n'play resolver for Webpack Plug'n'Play resolver for WebpackThis plugin is also available for Jest (jest-pnp-resolver), Rollup (rollup-plugin-pnp-resolve), and TypeScript (ts-pnp)Installationyarn...
webpack躺坑--指南篇一
Alexander_caeser的博客
10-07 271
安装 安装 首先确定安装了node.js，nodejs安装在此不做赘述 然后安装webpack，在此安装的为webpack4+，webpack的前面几代版本与webpack4+版本有所出入，该文档仅作webpack4+解释。使用之前版本可能打包不成功。 命令行模式下，cd进使用npm init初始化的项目的根目录。本地安装webpack。 npm install --save-dev webp...
Webpack 参考链接
weixin_30485799的博客
08-02 150
插件 clean-webpack-plugin 清理构建目录 html-webpack-plugin html 模板 webpack-merge webpack 配置合并 friendly-errors-webpack-plugin webpack-manifest-plugin manifest 文件生成 pnp-webpack-plugin terser-webpack-plugin 压缩 ...
ModelScope模型缓存路径
weixin_37862609的博客
10-31 2601
【代码】ModelScope模型缓存路径。
Webpack 插件扫盲系列（一） AddAssetHtmlPlugin和webpack.ProvidePlugin
追逐丶的博客
06-08 1万+
AddAssetHtmlPlugin 这个插件调用的npm包名是 add-asset-html-webpack-plugin,经常和html-webpack-tags-plugin做对比。 作用其实二者相同，当我们想在跟页面打包后，插入我们特定script的引用，来达到全局变量的效果（暴露在Window下）。 new AddAssetHtmlPlugin([ {filepath: path.resolve(__dirname, '../src/axios.min.js'), ou
Webpack 插件扫盲系列（四） WorkboxWebpackPlugin
追逐丶的博客
12-29 5488
一、背景 要了解WorkboxWebpackPlugin，首先需要说两个概念：第一个是ServiceWorker,第二个是PWA。ServiceWorker 本人写了一篇浅谈，大家可以先看一下。关于PWA,网上的讲解也很多，大家看完ServiceWorker，就知道ServiceWorker其实是基于WebWorker的一门技术。而PWA，就是基于ServiceWorker的一门技术。 #mermaid-svg-gugOl7MTKFg3nMxO .label{font-family:'trebuchet m
dotenv-webpack：一个安全的webpack插件，支持dotenv和其他环境变量，并且仅公开您选择和使用的内容
02-06
一个安全的webpack插件，支持dotenv和其他环境变量，并且仅公开您选择和使用的内容。 dotenv-webpack 安装 将软件包本地包含在您的存储库中。 npm install dotenv-webpack --save-dev 描述 dotenv-webpack包装...
react导入文件报错解决
IU
02-23 1107
react导入src之外的文件时报错问题解决
webpack认知与项目实践
望京十三兄的博客
10-21 2286
webpack是一个前端模块化打包解决方案,又是一个可以融合运用各种前端新技术的平台，可以将零散的JS代码打包到一个JS文件中
react报 Relative imports outside of src/ are not supported
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
10-19 2911
react报 Relative imports outside of src/ are not supported 。 react 限制开发者从非src目录导入模块文件 解决方案
react—create-app。src引入目录外部文件冲突问题：Relative imports outside of src/ are not supported.
热门推荐
u010682792的博客
05-08 1万+
使用react—create-app构建的项目，当src文件夹下文件想引用src文件夹外文件因为官方限制问题会报以下错误。Module not found: You attempted to import ****** which falls outside of the project src/ directory. Relative imports outside of src/ are no...
推荐开源项目：Webpack的Plug'n'Play解析器插件
最新发布
gitblog_00069的博客
05-25 377
推荐开源项目：Webpack的Plug'n'Play解析器插件 项目地址:https://gitcode.com/arcanis/pnp-webpack-plugin 项目介绍 在前端开发的世界里，Webpack 是一个不可或缺的模块打包工具。然而，随着项目规模的增长，依赖管理变得越来越复杂。pnp-webpack-plugin 正是为了解决这一问题而诞生的，它是一个针对Webpack的Plug'...
react-create-app，src引入目录外部文件冲突问题：Relative imports outside of src/ are not supported.
m0_44968822的博客
07-17 3347
使用react—create-app构建的项目，当src文件夹下文件想引用src文件夹外文件因为官方限制问题会报以下错误。 Module not found: You attempted to import ****** which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add
关于yarn 的Plug‘n‘Play特性
gggg5643的专栏
08-28 647
yarn的PnP特性介绍
阿里 魔塔 modelscope 框架的一些理解
qq_42693842的博客
11-02 1426
是一个操作的名字,一般一个操作是一个类,并且一般与类同名,后面跟着的则是类的参数,在构建时调用。这样就是注册完毕,后面通过configuration.json构建各个组件。最无语的是它会在运行开始时注册所有插件浪费时间空间资源,modelscope的设计思路是基于插件注册的思维。配置文件一个一个构建需要的插件,最后组成一个。再根据官网的结构图可以验证。名搜索类并通过参数实例化。然后通过装饰器注册模块。本文简单写一下个人理解。注册是如何进行的呢?首先初始化一个注册表。
如何写一个webpack插件
06-10
编写 Webpack 插件的步骤如下： 1. 创建一个 Node.js 模块，其中包含一个插件类。这个插件类需要实现 `apply` 方法，该方法会在 Webpack 打包过程中被调用。 2. 在 `apply` 方法中注册一个或多个 Webpack 生命周期钩子。Webpack 生命周期钩子是 Webpack 打包过程中的不同阶段，其中包括 `compilation`、`emit`、`done` 等。 3. 在钩子中编写插件的逻辑。例如，在 `compilation` 钩子中可以访问 Webpack 的编译对象和编译器，可以修改编译对象和编译器的行为。 4. 在插件类中定义一个可选的选项对象，用于配置插件的行为。这些选项可以通过 Webpack 配置文件中的插件选项进行传递。 下面是一个简单的 Webpack 插件的示例代码： ```javascript class HelloWorldPlugin { constructor(options) { this.options = options; } apply(compiler) { compiler.hooks.done.tap('HelloWorldPlugin', () => { console.log(`Hello, ${this.options.name}!`); }); } } module.exports = HelloWorldPlugin; ``` 在这个示例中，我们定义了一个 `HelloWorldPlugin` 类，它接受一个选项对象作为参数。在插件的 `apply` 方法中，我们注册了 `done` 钩子，并在钩子中输出一条简单的消息。 要使用这个插件，我们可以在 Webpack 配置文件中进行如下配置： ```javascript const HelloWorldPlugin = require('./HelloWorldPlugin'); module.exports = { // ... plugins: [ new HelloWorldPlugin({ name: 'World' }) ] }; ``` 在这个配置中，我们将 `HelloWorldPlugin` 插件实例传递给了 Webpack 的 `plugins` 选项。在运行 Webpack 时，插件会在 `done` 钩子中输出一条消息，例如： ``` Hello, World! ``` 除了 `done` 钩子，Webpack 还提供了很多其他的钩子，可以用于在不同的打包阶段进行操作。通过注册这些钩子，我们可以编写各种不同的 Webpack 插件，以满足不同的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值