在Rails Webpacker中使用webpack.ProvidePlugin加载异常，求解决方法

我来帮你一步步定位并解决这个全局注入Vue和lodash后无法在Vue模板正常使用的问题：

1. 修正lodash的ProvidePlugin配置 #

直接写_: "lodash"可能无法让webpack正确识别lodash的导出方式（lodash的CommonJS导出是一个函数），你需要调整配置，同时确保Vue加载的是适配webpacker的ES模块版本：

var webpack = require("webpack");
const { environment } = require("@rails/webpacker");
const vueLoader = require("./loaders/vue");

environment.loaders.append("vue", vueLoader);
environment.plugins.append(
  "Provide",
  new webpack.ProvidePlugin({
    Vue: ["vue/dist/vue.esm.js", "default"], // 显式指定Vue的ES模块导出
    _: "lodash"
  })
);

module.exports = environment;

如果只需要用到capitalize这类工具函数，也可以单独注入对应方法来减小打包体积：

new webpack.ProvidePlugin({
  Vue: ["vue/dist/vue.esm.js", "default"],
  capitalize: ["lodash", "capitalize"] // 直接注入capitalize方法
})

2. 让模板能访问全局注入的_ #

Vue模板的作用域是组件实例，全局注入的_默认无法直接在模板表达式中访问。你可以在Vue入口文件（比如app.vue或初始化文件）中把_挂载到Vue原型上：

import Vue from 'vue'
import _ from 'lodash'

// 挂载后所有组件模板都能直接访问_.xxx
Vue.prototype._ = _

之后在Header.vue里就能正常使用{{ _.capitalize('your content') }}了。

3. 确认vue-loader配置与依赖 #

检查./loaders/vue.js的配置是否正确，标准的vue-loader配置应该类似：

// loaders/vue.js
module.exports = {
  test: /\.vue$/,
  use: [
    {
      loader: 'vue-loader',
      options: {
        compilerOptions: {
          preserveWhitespace: false
        }
      }
    }
  ]
};

同时确保已经安装了必要依赖：

# yarn
yarn add vue-loader vue-template-compiler --dev

# npm
npm install vue-loader vue-template-compiler --save-dev

4. 清理缓存重新编译 #

webpacker的缓存可能导致配置不生效，执行以下命令刷新缓存：

rails webpacker:clean
rails webpacker:compile

然后重启开发服务器即可。

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