Webpack 4でyaml-loaderからjs-yaml-loaderに乗り換え

単なるメモ。

Nuxt 1 + Webpack 3 なプロジェクトでは

okonet/yaml-loader: YAML loader for webpack (converts YAML to JSON)

を使ってこんな感じで、

config.module.rules.push({
  test: /\.ya?ml$/,
  use: [
    { loader: 'json-loader' },
    { loader: 'yaml-loader' }
  ]
})

で YAML を読み込んでいたんだけど、これが Nuxt 2 + Webpack 4 だと cannot find module や Module parse failed: Unexpected token エラーが出て使いものにならなかった。

調べると Webpack 4 で json-loader は不要だの CommonJS, AMD, ESModule だのの扱いが変わって七面倒くさい感じの話があり、YAML を import する方法のブログだけで様々なやり方が出てきて「あーもう、こういうとこやぞ Webpack は！」と思ってたんだけど、そういや Nuxt 1 + Webpack 3 の頃になぜかうまく動かなかったような気がする js-yaml-loader を思い出して試したらあっさり動いた。

ということで Nuxt 2 + Webpack 4 なプロジェクトでは

wwilsman/js-yaml-loader: JS-YAML loader for webpack

を使って

config.module.rules.push({
  test: /\.ya?ml$/,
  use: 'js-yaml-loader'
})

としていこうと思う。ここの変更だけで import 部分は変えずに

import yaml from <path-to-yaml-file>

で ok なので、たいへんよい感じである。

おしまい。

Webpack は機能の根幹に関わる API が変わりすぎだろ。最初からイヤな予感してたけど、やっぱり地雷感強い。

More