@vue/cli 4.5如何移除指定插件?

更新:
最终结果是该插件有依赖关系,想要删除html插件,需要连续删除多个,下面列出

config.plugins.delete('preload');
config.plugins.delete('prefetch');
config.plugins.delete('html');

分割线-----------------------------------------------------------------------------------------

module.exports = {
  configureWebpack: {
    devtool: 'none', // 禁用生成.map文件
    optimization: {
      splitChunks: false, // 阻止抽离公共模块
    },
  },
  chainWebpack: (config) => {
    config.plugins.delete('copy');
    config.plugins.delete('html');
    config.plugins.delete('preload');
  },
};

执行config.plugins.delete('preload')后,报错TypeError: Cannot read properties of undefined (reading 'tap')
错误来源是\node_modules\@vue\preload-webpack-plugin\src\index.js:115:65
也就是,我已经调用了删除该插件,但还是执行到了preload-webpack-plugin插件中,咋回事呢?删除无效吗?

阅读 1.8k
avatarAI BotBETA

在 Vue CLI 4.x 中,如果你想要移除特定的插件,你需要明确地指定你想要移除的插件的名称。对于你的情况,你想要移除 'html' 插件。

不幸的是,直接在 vue.config.js 文件中删除或修改插件是不可能的,因为 Vue CLI 在构建过程中会直接使用插件的默认配置,不会考虑你的自定义配置。

但是,你可以尝试以下方法:

  1. 自定义插件:创建一个自定义插件来替代 HTML 插件。这个插件可以什么都不做,这样在构建过程中,它就不会生成任何文件。
// plugins/HtmlWebpackPlugin.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      // 你可以在这里设置你想要传递给 HTML 插件的任何选项,但是不要包含 'chunks' 和 'template'
    })],
};

然后在你的 vue.config.js 中引用这个插件:

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [require('./plugins/HtmlWebpackPlugin')],
  },
};
  1. 直接修改插件配置:你可以尝试直接修改 HTML 插件的配置以改变其行为。这需要你有对 HTML 插件源码的深入了解。你需要在你的 vue.config.js 中覆盖 HTML 插件的默认配置:
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        chunks: [], // 不要包含 'index' 和 'favicon' 块
        template: undefined, // 移除模板选项,这样就不会生成 index.html 和 favicon.ico
      })],
  },
};

请注意,这些方法都可能会影响到你的应用程序的行为,因此在使用这些方法之前,你应该确保你理解了这些选项的含义和可能的影响。

1 个回答

想去掉打包时生成的index.html和favicon.ico文件
可以build后再删掉就可以了
方案1、package.json scripts 中build命令后面增加 && rimraf ./dist/index.html && rimraf ./dist/favicon.ico
方案2、package.json scripts 中新增以下命令 "postbuild": "rimraf ./dist/index.html && rimraf ./dist/favicon.ico"
上述两种方法都用到了rimraf,需要安装依赖 npm i -g rimraf

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题