vue脚手架中这两个配置项的区别？

  • Z时代
  • 2024-02-09
  • 分类：IT

vue脚手架中这两个配置项的区别？

vue.config.js文件里的：
configureWebpack.plugins
pluginOptions
这两者的区别是啥？
主要是在网上搜寻如何查看打包后各模块大小的时候，看到了npm上的两个插件：webpack-bundle-analyzer和vue-cli-plugin-webpack-bundle-analyzer，发现他们的配置好像不一样，去vue-cli的官网看了下上面两个配置项的介绍也还是有点模糊(应该是我webpack学的烂?)

回答：

configureWebpack

如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。

module.exports = {
  configureWebpack: {
    plugins: [ // configureWebpack.plugins
      new MyAwesomeWebpackPlugin()
    ]
  }
}

如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

configureWebpack: config => {
    config.plugins.push(
      new HtmlWebpackInlinePlugin()
    )
}

pluginOptions

这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项。例如：

module.exports = {
  pluginOptions: {
    foo: {
      // 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
    }
  }
}

vue-cli-plugin-webpack-bundle-analyzer 基于 webpack-bundle-analyzer ，通常直接使用 webpack 构建的项目使用 webpack-bundle-analyzer；如果集成到 vue cli 使用 vue-cli-plugin-webpack-bundle-analyzer，当然， webpack-bundle-analyzer 也可。vue-cli-plugin-webpack-bundle-analyzer 相当于将 api 更贴近 vue cli。

以上是 vue脚手架中这两个配置项的区别？ 的全部内容， 来源链接： utcz.com/p/935544.html

回到顶部