webpack 配置根据环境动态引入JS

背景

在移动端开发时，开发环境需要引入 vConsole 查看log。
在线上部署时，则不需要引入，基于这个需要，配置根据 env 环境变量，自动管理。

vue.config.js 配置

const isProdu = process.env.NODE_ENV ===  'production'

module.exports = {
  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      args[0].title = ''
      args[0].PACK_TIME = new Date()
      args[0].dev = !isProdu
      return args
    })
  }
}

html 模板配置

<!DOCTYPE html>
<html lang="">
  <head>
    ...
    <% if(htmlWebpackPlugin.options.dev) {%>
      <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <% } %>
  </head>
  ...
</html>
posted @   Better-HTQ  阅读(898)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示
AI IDE Trae