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

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

阅读 3k
1 个回答

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。

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