Zenn
Closed7

【Nuxt 2】nuxt.config.js, webpack周りメモ

Nuxt
Nuxt
webpack
Babel
brietebriete

最近、開発でNuxt.jsを使っているので設定周りやwebpack周りの調べたことをメモする

brietebriete

基本的にNuxtの設定は nuxt.config.js に記述する。webpackは隠蔽されていて直接は触れないが、この設定ファイルからオーバーライドできる。

modern

レガシーブラウザ（IE9レベル）とモダンブラウザのビルドをわけれるらしい。IE9レベルを対応することは現状はなさそうなので基本的に設定する必要はなさそう。

hooks

Nuxtはデフォルトだと裏でexpressが動いているので、ミドルウェアを刺したり、ビルドをトリガーにした処理などを追加できる。https://nuxtjs.org/docs/internals-glossary/internals もろもろイベントをトリガーにできるみたい。

env

その名の通り、環境変数を設定する。

server

ホストとポートを設定する。基本的にはデフォルトの localhost でOK。

srcDir

ソースコードのベースパスを指定する。

HTMLの <head> タグと同じ。ここに記載した内容が以下のテンプレートに流し込まれる。

{
    meta: [
      { hid: 'charset', charset: 'utf-8' },
      { hid: 'robots', name: 'robots', content: 'noindex, nofollow' },
    ],
    link: [
      {
        hid: 'favicon',
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.ico',
      },
    ],
    htmlAttrs: {
      lang: 'ja',
    },
  }

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>
brietebriete

CSS

グローバルで設定したいCSSファイルを指定する。CSSフレームワークを使う場合などはnode_modules のライブラリを直接指定することができる。

brietebriete

modules

Nuxtのコア機能の拡張で使う。自作のモジュールも使うことができる。基本的には、@nuxtjs/xxx のライブラリを使用するのに使う。開発では主に以下のライブラリを使用しています。

  • @nuxtjs/style-resources
    • sassとかscssでグローバルで変数とかMixinを使えるようにする
  • @nuxtjs/axios
    • axiosを簡単にに使えるようにする。nuxtのコンテキストから$axiosで扱える。主にasyncData() で使う。
  • cookie-universal-nuxt
    • nuxtでcookieを扱うのに使う
brietebriete

plugins

上のmodulesと似ているが、modulesはnuxtのモジュールを追加するのに対して、pluginsはvueのpluginとして動作する点

アプリケーション全体で使用するものを定義すると便利。例えば、アプリケーションのLoggerを設定したり、認証、API fetch系、エラーハンドリングなど。

brietebriete

build

Nuxt.jsは内部的にwebpackを使ってビルドをしているが、webpack.config.jsのデフォルト設定の上書きに使う。例えば、hard-source-webpack-pluginを使って2回め以降の処理の高速化を図ったり、各種loaderを使うのにも使う

brietebriete

buildModules

nuxtのビルドに使うモジュールを定義する。TypeScriptや tsx のビルドをしたい場合、‘@nuxt/typescript-build‘ を使ったりする

このスクラップは2022/04/27にクローズされました