如何从Vue服务端打包排除模块？配置webpack为velocity-animate启用null-loader遇阻

我来帮你梳理一下解决这个问题的几个靠谱方案，你遇到的核心问题是Vue服务端渲染（SSR）场景下，像velocity-animate这种依赖浏览器DOM的库，在服务端打包时会因为缺少环境支持报错，而且vue-loader接管.vue文件后，常规的loader配置好像没生效对吧？下面一步步来解决：

一、配置webpack让null-loader正确处理velocity-animate #

其实不用纠结vue-loader的影响，webpack可以直接针对特定模块配置loader，不管它是从.vue还是普通JS文件引入的。具体步骤：

1. 先安装null-loader：

npm install null-loader --save-dev

2. 在你的服务端webpack配置文件里添加规则：

module.exports = {
  // 其他服务端打包配置...
  module: {
    rules: [
      // 匹配velocity-animate模块，用null-loader忽略它的代码
      {
        test: /velocity-animate$/,
        loader: 'null-loader',
        include: /node_modules/
      }
    ]
  }
}

这个规则会直接命中velocity-animate模块，webpack在服务端打包时会把它替换成null，不会把它的代码打包进去，自然就避免了服务端的DOM缺失问题。

二、更优雅的客户端引入方式（替代你的临时方案） #

你用process.env.VUE_ENV包裹require的方法是可行的，但可以更简洁：

方式1：在组件的mounted钩子引入（只在客户端执行） #

因为mounted钩子只会在浏览器端触发，完全不用担心服务端执行：

<template>
  <div ref="animateEl">我是要动画的元素</div>
</template>

<script>
export default {
  mounted() {
    // 动态引入velocity-animate
    import('velocity-animate').then(Velocity => {
      // 使用Velocity操作DOM
      Velocity.default(this.$refs.animateEl, { opacity: 0.5 }, { duration: 1000 })
    })
  }
}
</script>

方式2：在客户端入口文件全局引入 #

如果需要全局使用，可以在客户端专属的入口文件里引入：

// client-entry.js（只在浏览器端加载的入口）
import Vue from 'vue'
import Velocity from 'velocity-animate'

// 挂载到Vue原型上，方便组件里用this.$velocity调用
Vue.prototype.$velocity = Velocity

服务端的入口文件里完全不用引入这个库，自然就不会被打包进去。

三、从Vue服务端打包排除模块的通用方法 #

除了null-loader，还有几种通用方式可以排除服务端不需要的模块：

1. 使用webpack的externals配置 #

如果某些模块你不想打包进服务端bundle，可以把它设为externals，让Node.js在运行时去require（但要确保服务端环境安装了该模块，且服务端代码不会实际调用它）：

// 服务端webpack配置
module.exports = {
  externals: [
    function(context, request, callback) {
      // 匹配要排除的模块
      if (/velocity-animate/.test(request)) {
        // 告诉webpack这个模块用commonjs方式外部引入
        return callback(null, 'commonjs velocity-animate')
      }
      callback()
    }
  ]
}

2. Vue CLI项目用chainWebpack配置 #

如果是用Vue CLI创建的项目，可以通过chainWebpack更灵活地配置：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 只在服务端打包时应用这个规则
    config.when(process.env.VUE_ENV === 'server', config => {
      config.module
        .rule('velocity')
        .test(/velocity-animate$/)
        .use('null-loader')
        .loader('null-loader')
        .end()
    })
  }
}

总结一下最优流程 #

1. 在服务端webpack配置中添加null-loader规则，确保服务端打包时忽略velocity-animate；
2. 在客户端代码的合适位置（mounted钩子、客户端入口）引入并使用velocity-animate；
3. 如果是Vue CLI项目，用chainWebpack配置会更贴合项目结构。

内容的提问来源于stack exchange，提问作者aaaaaa