javascript - Babel/Webpack : Cannot find "yaml-loader" (works in development, 未生产)

Question

这是有问题的代码行:

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

如您所见，我使用 ! 绕过正常的导入加载器逻辑，以便我可以在编译时将解析的 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 移动到 dependency，尽管这不应该起作用，但它确实做到了确实不行)

Answer 1

您是否在 webpack.config.js 中添加了加载程序。

//webpack.config.js

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

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