vue.config.js中chainWebpack支持异步数据

vue.config.js中chainWebpack支持异步数据

前言

项目背景

• 项目使用vue-cli4搭建的，如需修改Webpack的配置，需要修改vue.config.js。
• 项目中，在chainWebpack中调用了html-webpack-plugin生成dev.html文件。

• html-webpack-plugin的配置templateParameters支持模板参数注入，支持对象和方法。本文就是基于这个配置做文章。如何配置可参考：templateParameters demo

  在html页面接收foo参数，即可获得bar值：

  <script>
  <%= foo %>
  </script>

需求

• 需要在dev.html注入一些数据，而这些数据是异步获取的（调用接口或者其他方式）。我这里是需要通过Node.js的child_process执行git命令，获取分支信息。

尝试

• templateParameters支持function。可以尝试传入async方法，通过await获取到数据后，再返回。

遇到问题

• chainWebpack和templateParameters均不支持异步。

  • chainWebpack改为异步后，打包报错。
  • templateParameters改为异步后，虽不影响打包，但是变量不生效。

  

苦于vue-cli-service和html-webpack-plugin均不支持异步，只能另想办法。

解决

查阅资料

先通过百度，国内貌似没有类似的记录文章。然后Google，果然找到了类似需求：

Vue config async support

有人提出了类似的issue，虽然作者没有直接解决，但是也给出了一个work around：

改代码

这个方法的思路，实际上将npm run serve包了一层wrap，在外层拿到数据后，再通过代码调用npm run serve开始打包。接下来我们来完成这个wrap。

1. 首先新建一个文件serve.prehandle.js，用于wrap。先获取异步数据，待拿到之后再开始打包：

   const getGitDevInfo = require('./src/pages/demo/webpack-plugin/git-info')
   const isDevEnv = process.env.NODE_ENV !== 'production'
   module.exports = (api, options) => {
     api.registerCommand('serve:prehandle', async (args) => {
       if (isDevEnv) {
         const def = await getGitDevInfo()
         process.asyncParamter = def
       }
       await api.service.run('serve', args)
     })
   }
   
   module.exports.defaultModes = {
     'serve:prehandle': 'development'
   }

2. 然后修改package.json

   修改serve命令

   {
     "scripts": {
       "serve": "vue-cli-service serve:prehandle"
     }
   }

   增加vuePlugins，对应上面的serve.prehandle命令，为这条命令指定处理文件

   {
      "vuePlugins": {
         "service": ["serve.prehandle.js"]
       } 
   }

3. 修改vue.config.js去接收数据。这里我存在process全局变量中：

   config.plugin('html').use(HtmlWebpackPlugin, [{
     filename: 'dev.html',
     template: 'src/pages/demo/index.html',
     templateParameters: {
       config: `window.devGitInfo=${JSON.stringify(process.asyncParamter || {})}`
     },
     chunks: ['chunk-vendors', 'chunk-common', 'dev'],
   }])

接下来，执行后可生效！

npm run serve

相关知识点

vue-cli Service Plugin

vue-cli支持导入自定义的Service Plugin，具体参考下面文档：

Project local plugin

Add a new cli-service command