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

如何使用webpack链移除插件?

要在Webpack配置中使用链式调用(chain)来移除插件,你需要使用webpack-chain库。webpack-chain是一个用于修改Webpack配置的链式API。它允许你以更简洁的方式修改配置,而不是直接修改配置对象。

首先,确保你已经安装了webpack-chain库:

代码语言:javascript
复制
npm install webpack-chain --save-dev

然后,你可以在你的webpack.config.js文件中使用webpack-chain来移除插件。以下是一个示例:

代码语言:javascript
复制
const Config = require('webpack-chain');
const webpack = require('webpack');

const config = new Config();

// 添加插件
config.plugin('html')
  .use(require('html-webpack-plugin'), [{
    template: './src/index.html'
  }]);

config.plugin('provide')
  .use(webpack.ProvidePlugin, [{
    $: 'jquery',
    jQuery: 'jquery'
  }]);

// 移除插件
config.plugins.delete('provide');

module.exports = config.toConfig();

在这个示例中,我们首先添加了两个插件:html-webpack-pluginwebpack.ProvidePlugin。然后,我们使用config.plugins.delete()方法来移除webpack.ProvidePlugin插件。

请注意,你需要根据实际情况替换插件名称。在这个例子中,我们使用了插件的名称(provide),但实际上,你应该使用插件的实例名称。例如,如果你在配置中使用了new webpack.ProvidePlugin(),那么你应该使用provide作为插件名称。

如果你不确定插件名称,可以在config.plugins.store中查找:

代码语言:javascript
复制
console.log(config.plugins.store);

这将输出一个包含所有插件信息的对象,你可以从中找到插件名称。

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

相关·内容

webpack 插件开发】如何在vscode调试webpack源码

前言 ❝最近打算深入学习下webpack原理,打算翻翻源码,借此更新webpack系列的知识点,平时学习的底稿也挺多的,也该整理出来了 ❞ 暂定会更新以下知识点 如何实现一个webpack loader...如何实现一个webpack plugin 谈谈Tapable 实现一个简易的webpack debug webpack源码 如何在vscode调试源码 ❝先学会调试源码,在后面开发loader或者plugin...会显得更得心应手,以下是我调试less-loader的分享 ❞ 使用 vscode + npm 插件 ❝在 vscode 中安装插件 egamma/npm 插件。...该插件可以帮我们界面直接点击去运行 package.json 文件中 scripts 下面定义的脚本命令。...image.png 使用 chrome 浏览器调试 参考博客 首先再想要调试的地方添加代码:debugger; 在项目根目录下面运行命令:node-nightly --inspect .

1.4K10
  • 如何写一个webpack插件(一)

    前言 最近由于用着html-webpack-plugin觉得很不爽,于是乎想自己动手写一个插件。原以为像gulp插件一样半天上手一天写完,但令人郁闷的是完全找不到相关的文章。一进官方文档却是被吓傻了。...然后教程会告诉你,你需要去了解compiler和compilation这两个对象,才能更好地写webpack插件,然后作者给了github的链接给你,让你去看源代码,我晕。...这个相当于是插件可以进行处理的webpack的运行中的一些任务点,webpack就是完成一个又一个任务而完成整个打包构建过程的。如下图: ?...例子 接下来,会以最近我写的一个插件html-res-webpack-plugin作为引子,来介绍基本的写插件原理。插件的逻辑就写在index.js里。...function HtmlResWebpackPlugin(opt) { // 进行参数的处理 } 然后,新增apply函数,在里面写好插件需要切入的webpack任务点。

    1.4K80

    Webpack05-js压缩插件uglify的使用

    前言 开发环境:development(不需要进行js压缩,不方便调试) 生产环境:production(正式发布上线,需要继续压缩) 一般项目中会有两个webpack配置文件,分别用于不同的环境要求...JS压缩插件uglify 1、安装 在webpack4之前,默认集成该插件,无需安装 在webpack4之后,需要独立安装 npm install uglifyjs-webpack-plugin -...-save-dev 另外,webpack4默认是生产环境,自带js压缩功能 如果要关闭,需要设置mode为development ?...image.png 3、执行webpack js文件大小由之前的24KB,缩小到了7KB,只有原来是三分之一 参考文章 webpack4.0关闭开发环境的代码压缩UglifyJsPlugin https...://blog.csdn.net/zhanglong_web/article/details/79618055 https://jspang.com/posts/2017/09/16/webpack3.

    2.3K30

    Webpack4教程 - 第三部分,如何使用插件

    这次,我们来学习如何使用插件,看看它解决了什么问题。本文会涉及一些日常用例,比如,生成链接了所有资源的HTML,以及把CSS抽取为单独的文件。...Webpack 4教程 - 第三部分 如何使用插件 使用插件最基本的方法是把它们放在配置文件中的plugins属性下。你需要调用new操作符创建一个插件的实例。...此插件则简化了这件事情。 另一件值得注意的重要事情就是,你的外文件名可能会因为打包时使用哈希而改变。这就让HtmlWebpackPlugin更加有用了,因为你不需要手动追踪那些文件名。...不仅如此,我们还学习了如何插件传递配置项,以及如何将它们与loader一并使用。虽然这里只是一部分插件的用例,但其他插件使用方法也是类似的。你可查看官方的插件列表来寻找你需要的插件。...你也可以使用搜索引擎去发现更多。Webpack本身就是基于同样的一套插件系统来构建的,所以学习它们在底层是如何工作的会很有趣。我们将在以后讨论这些,届时去实现我们自己的插件

    53510

    如何Meteor中轻松使用Webpack

    但有件事我并不是很高兴,那就是配置Webpack太难了。你需要学习一系列新的概念才能写webpack.config.js。我不喜欢那些文件,因为不管你做的东西多么简单,配置它们都相当麻烦。...所以我重回黑板来设计一个新的Webpack集成扩展。一个足够简单的扩展让你开始使用它,并且足够地灵活让你根据你的任何需要配置构建步骤。 今天我发布一个崭新的webpack:webpack版本。...现在你可以添加一行代码使用React的热重载: meteor add webpack:react 你可以通过添加一行代码require.ensure实现代码分离(Webpack 2给我们一个更好的语法)...你可以使用TypeScript, SASS, LESS和更多的工具仅仅通过添加一个扩展包。 这仅仅是个开始。任何人可以写一个Meteor扩展包来封装特定的Webpack配置。...我迫不及待想看到你们在Meteor项目中使用它了,让我知道你们的使用状况!

    1K30

    Webpack 实战入门系列(二):插件使用及热更新打包

    webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。总结起来就是插件可⽤于包⽂件的优化,资源管理和环境变量注⼊。...你如果愿意,也可以开发一个自己的插件。 现在就来看看HtmlWebpackPlugin这个插件,我们前面都是手动创建的html页面,而这个插件可以自动生成基本的 html 页面,使用起来比较简单。...下面是使用步骤: 安装插件 npm install --save-dev html-webpack-plugin 安装好了就可以在后面配置并使用了。...配置使用 如下所示,在webpack.config.js文件中添加一个HtmlWebpackPlugin常量,引用此插件,然后在下面的配置中加上plugins节点,里面加上此插件实例。...配置使用 在package.json添加配置 “dev”: "webpack-dev-server --open" 然后在webpack.config.js中添加配置,先声明一个常量webpack const

    46730

    Vue的学习(十)什么是webpack。安装webpack流程,如何最原始的使用webpack

    什么是webpack 他就是一个工具,用来进行模块打包。...关键的就是 模块 打包 我们开发项目的使用,有很多的文件,比如js,css ,图片等其他的文件,直接将这些文件放到服务器上面,浏览器是不能解析的。...总之,webpack就是一个工具,这个根据依赖node环境 ? 安装webpack流程 ?...我们安装webpack是3.6.0 版本的 ,之后安装脚手架vue cli2 ,这个是版本配套的,因为这个版本我们就可以看到源码里面具体的东西。 使用webpack ?...有两个js 文件,我们用webpack合并为一个 ? ? 以上是两个js里面的代码,一个js里面引入了另一个js 在控制台进行用webpack进行合并 ?

    76140

    Webpack插件如何编写的——prerender-spa-plugin源码解析

    概述 本文主要的内容是通过之前使用的prerender-spa-plugin插件的源码阅读,来看下我们应该如何编写一个webpack插件,同时了解下预渲染插件到底是如何实现的。...这个内容其实已经在使用prerender-spa-plugin里面有所涉及了,这一章的内容算是对之前一篇文章的补充和拓展,详细介绍下Webpack插件机制到底是如何运行的,之前写的简单的替换的插件生效的原理到底是什么...如果大家还没有看之前的如何使用prerender-spa-plugin插件对页面进行预渲染这篇文章,可以先去看看,了解下这个插件到底是做什么的,我们的插件大概是什么样的。...首先,我们让我们来简单回顾下这个插件如何使用的,这个对于我们了解其内部构造,有一定的帮助。我们就直接使用它官方文档上提供的一个例子。...一个原型上的apply方法。 一个钩子函数。 一个绑定生命周期的代码。 有了这些东西,我们的一个Webpack插件就完成了。

    72200

    Webpack插件如何编写的——prerender-spa-plugin源码解析

    概述 本文主要的内容是通过之前使用的prerender-spa-plugin插件的源码阅读,来看下我们应该如何编写一个webpack插件,同时了解下预渲染插件到底是如何实现的。...这个内容其实已经在使用prerender-spa-plugin里面有所涉及了,这一章的内容算是对之前一篇文章的补充和拓展,详细介绍下Webpack插件机制到底是如何运行的,之前写的简单的替换的插件生效的原理到底是什么...如果大家还没有看之前的如何使用prerender-spa-plugin插件对页面进行预渲染这篇文章,可以先去看看,了解下这个插件到底是做什么的,我们的插件大概是什么样的。...首先,我们让我们来简单回顾下这个插件如何使用的,这个对于我们了解其内部构造,有一定的帮助。我们就直接使用它官方文档上提供的一个例子。...一个原型上的apply方法。     - 一个钩子函数。     - 一个绑定生命周期的代码。 有了这些东西,我们的一个Webpack插件就完成了。

    72140

    我们如何使用 Webpack 将启动时间减少 80%

    作为最古老、最成熟的打包工具之一,至今仍在积极地维护中,webpack 拥有一个庞大的插件生态系统,适应任何类型的复杂应用,并且它对 Node.js 提供了一流的支持。...果然,通过 webpack 及其插件处理,每个文件都简化了构建过程。通过高效缓存,后续构建的速度会更快,从而获得更好的 DX 和更短的部署窗口。...,第三个包 @types/webpack-env,会启用 webpack 的 require.Context 的自动完成功能,这需要手动指导 webpack 如何以元编程的方式处理符号,例如,在源代码目录中找到你的...externals: [nodeExternals()], } 别忘了你的插件——webpack 一切与插件相关! module.exports = { // ......plugins: [ ...plugins, ], } 下面是我们使用的一些插件的列表,向出色的贡献者和维护者致敬!

    1.2K20
    领券