オレオレ webpack loader 作って nuxt に導入するメモ


このブログを作るのにちょっとした webpack loader を書いて nuxt に適用したので、そのメモ。

メモ

  • 基本の書き方
  • node で動かすことに留意する
    • import/export で書かれてるが、 node で v9 でもまだ --experimental-modules 立てないと動かないので、 module.exportsrequire で書く等。
  • 雛形を作成して、読み込まれることを確認してから先に進む
    • 単に source を受け取って console.log するだけのやつでもいい
  • loader は hot reload 対象外
    • 当たり前だけど。 nuxt 起動し直しが必要

nuxt.config.js

build - extend で webpack の設定を拡張してやる必要がある。

オレオレ hoge-loader を loaders において、下記のような設定を書く

module.exports = {
  build: {
    extend(config) {
      config.resolveLoader.modules.push(path.resolve(__dirname, "loaders"));
    },
  },
};

あとは利用側で import fuga from 'hoge-loader!fuga.js' という形で利用できる。


メンテされてない loader 使うくらいならサクッと作ったほうがいい説ある。 ってそれ gulp でも通った道や……。