Webpack+Vue配置问题：Vue应用无法渲染，新手手动配置遇困

作为刚从封装好的工具转手动配置Webpack的Vue新手，这种“配置不生效”的问题确实挺挠头的——我当初第一次手动搭的时候也踩过不少坑。结合你是在Hugo站点里替换CDN Vue为Webpack打包的场景，咱们一步步来排查：

第一步：先确认Webpack本身的配置是否能独立运行 #

先脱离Hugo环境，单独跑Webpack打包命令（比如npx webpack），看看能不能生成预期的bundle文件。如果这一步就失败，那问题出在Webpack配置本身：

• 检查entry入口是否正确指向你的两个Vue应用的入口文件，比如：

  module.exports = {
    entry: {
      app1: './src/app1/main.js',
      app2: './src/app2/main.js'
    },
    // ...其他配置
  }
  

• 确认Vue的loader配置是否正确，手动配置必须处理.vue文件，而且别忘了关键插件：

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin() // 很多新手会漏加这个，直接导致.vue文件无法编译
  ]
  

• 检查依赖版本是否匹配：vue-loader和vue的版本要对应（Vue2对应vue-loader@15.x，Vue3对应vue-loader@16+），同时vue-template-compiler的版本要和vue完全一致。

第二步：排查Hugo和Webpack的集成问题 #

Hugo的静态资源处理逻辑可能会影响你的bundle加载：

• 确保Webpack打包后的文件输出到Hugo能识别的静态目录（比如默认的static/js/），可以在Webpack里配置output：

  output: {
    filename: 'js/[name].bundle.js',
    path: path.resolve(__dirname, 'static') // 指向Hugo的static目录
  }
  

• 替换Hugo页面模板里的资源引用：之前用CDN的<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>要换成Webpack打包后的文件，并且不要同时保留CDN的Vue引用，否则会和打包后的Vue实例冲突：

  <!-- 页面1引用app1的bundle -->
  <script src="/js/app1.bundle.js"></script>
  <!-- 页面2引用app2的bundle -->
  <script src="/js/app2.bundle.js"></script>
  

第三步：清理旧方式的残留冲突 #

• 之前用CDN时，你的代码可能依赖全局的Vue对象（比如new Vue({ el: '#app' })），如果Webpack打包是用模块化引入（import Vue from 'vue'），要确保代码里不再依赖全局Vue；如果想继续用全局模式，可以在Webpack里配置externals，但更推荐用模块化写法。
• 清理Hugo缓存：执行hugo clean后再重新构建，避免加载到旧的CDN资源或未更新的bundle文件。

第四步：用调试信息定位问题 #

• 打开浏览器控制台，看有没有报错：是404找不到bundle文件？还是Vue实例初始化报错？这些信息是定位问题的核心。
• 在Webpack配置里开启devtool: 'source-map'，这样可以在浏览器里看到原始代码，方便调试打包后的代码哪里出了问题。

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