vue.config.js 中怎么查看chainWebpack的config

Question

vue.config.js 中怎么查看chainWebpack的config
使用console打印无效，使用window,sessionStorage,localStorage,alert这些方法显示没有被定义

module.exports = {
    chainWebpack:(config)=>{
    //查看这个config参数
    }
}

Answer 1

在 vue.config.js 中查看 chainWebpack 的 config，可以使用 webpack-chain 库中提供的方法。

首先，在配置中引入 webpack-chain：

const chain = require('webpack-chain')

然后在 chainWebpack 中使用该库的方法，查看 webpack 的配置。

chainWebpack: config => {
  console.log(config.toString())
  // or
  console.log(config.toConfig())
}

toString() 方法可以将 webpack 配置转换为字符串形式, toConfig()方法则将配置转换成对象的形式。
你可以在 vue.config.js 中输出，然后在控制台查看输出的配置。
如果你运行vue-cli3.0或者更高版本,在执行 npm run serve 或 npm run build 时配置文件会自动输出到控制台中。
另外，你也可以使用一些webpack工具来查看配置,例如: webpack-bundle-analyzer