Babel / Webpack：找不到“yaml-loader”（在开发中工作，而不是在生产中）答案

【问题标题】：Babel / Webpack: Cannot find "yaml-loader" (works in development, not production)Babel / Webpack：找不到“yaml-loader”（在开发中工作，而不是在生产中）
【发布时间】：2018-02-06 08:12:12
【问题描述】：

这是有问题的代码行：

import Channel from '!json-loader!yaml-loader!../../../../config/channel.yml'

如您所见，我正在使用!s 绕过正常的导入加载器逻辑，因此我可以在编译时将解析的 YAML 文件作为局部变量导入。

这在开发中完美运行（使用 webpack-dev-server）但在生产中失败：

Module not found: Error: Can't resolve 'yaml-loader' in '/var/www/www.avfacts.org/releases/20180205125420/app/frontend/views/Episodes'
 @ /var/www/www.avfacts.org/shared/node_modules/babel-loader/lib!/var/www/www.avfacts.org/shared/node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/frontend/views/Episodes/Form.vue 87:0-78
 @ ./app/frontend/views/Episodes/Form.vue
 @ /var/www/www.avfacts.org/shared/node_modules/babel-loader/lib!/var/www/www.avfacts.org/shared/node_modules/vue-loader/lib/selector.js?type=script&index=0!./app/frontend/views/Episodes/Edit.vue
 @ ./app/frontend/views/Episodes/Edit.vue
 @ ./app/frontend/routes.js
 @ ./app/frontend/packs/application.js

这是我的 package.json 文件：

{
  "name": "avfacts",
  "private": true,
  "dependencies": {
    "@panter/vue-i18next": "^0.9.1",
    "@rails/webpacker": "^3.2.1",
    "axios": "^0.17.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-minify": "^0.2.0",
    "i18next": "^10.3.0",
    "lodash": "^4.17.4",
    "luxon": "^0.4.0",
    "marked": "^0.3.12",
    "moment": "^2.20.1",
    "moment-duration-format": "^2.2.1",
    "normalize.css": "^7.0.0",
    "numeral": "^2.0.6",
    "precss": "^3.1.0",
    "simplemde": "^1.11.2",
    "vue": "^2.5.13",
    "vue-datetime": "^1.0.0-beta.2",
    "vue-loader": "^13.7.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.13",
    "vuex": "^3.0.1",
    "weekstart": "^1.0.0"
  },
  "devDependencies": {
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "webpack-dev-server": "^2.11.1",
    "yaml-loader": "^0.5.0"
  }
}

（是的，我确实尝试将 yaml-loaders 从 devDependencies 移动到 dependencies，尽管这不应该起作用，而且确实不起作用）

【问题讨论】：

标签： javascript node.js webpack babeljs

【解决方案1】：

你是否在 webpack.config.js 中添加了加载器。

// webpack.config.js

module: {
  loaders: [
    {
      test: /\.yaml$/,
      include: path.resolve('data'),
      loader: 'yaml',
    },
  ],
}

正如https://www.npmjs.com/package/yaml-loader中提到的那样

【讨论】：

谢谢，我确实试过了，但没有任何改变。我对使用内联加载器语法 (import foo from '!loader-name!path/to/file') 的理解是，不管它是否在您的加载器配置中都无关紧要，我认为。

【解决方案2】：

编辑：不，不是这样。我用 yaml-js-loader 替换了 yaml-loader 并称之为一天。仍然不确定是什么问题。

通过在我的Capfile 中禁用require 'capistrano/rails/assets 似乎解决了这个问题，从而禁用了正常的Rails Sprockets 资产编译（此任务也运行yarn install，但显然是在不同的环境中或其他什么地方？）。

现在只运行 capistrano/yarn 任务，它们成功地执行了 Webpack 资产编译。

【讨论】：