API: build プロパティ

Nuxt.js ではウェブアプリケーションを自由にビルドできるよう Webpack 設定をカスタマイズできます。

analyze

Nuxt.js では webpack-bundle-analyzer を使ってバンドルファイルと最適化の仕方を視覚化できます。

  • 型: Boolean または Object
  • デフォルト: false

オブジェクトの場合は、利用できるプロパティは こちら を参照してください。

例(nuxt.config.js):

export default {
  build: {
    analyze: true,
    // または
    analyze: {
      analyzerMode: 'static'
    }
  }
}

情報: yarn nuxt build --analyze または yarn nuxt build -a コマンドを使って、アプリケーションをビルドしてバンドルアナライザを http://localhost:8888 で起動できます。yarn を使っていない場合は、コマンドに npx を付けて実行できます。

babel

JavaScript や Vue ファイルのために Babel の設定をカスタマイズします。 .babelrc はデフォルトで無視されます。

  • 型: Object babel-loaderoptionsbabeloptions を参照してください

  • デフォルト:

    {
      babelrc: false,
      cacheDirectory: undefined,
      presets: ['@nuxt/babel-preset-app']
    }

@nuxt/babel-preset-app のデフォルトターゲットは client ビルドでは ie: '9'server ビルドでは node: 'current' になります。

presets

  • 型: Function
  • 引数:
    1. Object: { isServer: true | false }
    2. Array:
      • プリセット名 @nuxt/babel-preset-app
      • @nuxt/babel-preset-appoptions

メモ: build.babel.presets のプリセットの設定はクライアントビルド、サーバービルド両方に適用されます。ターゲットは(クライアント/サーバー)それぞれに応じて Nuxt によって設定されます。クライアントビルドとサーバービルドで異なるプリセットの設定をしたい場合は、関数として presets を使用してください。

以下のカスタマイズの代わりにデフォルトのプリセットを使用することを 強くお勧めします

export default {
  build: {
    babel: {
      presets({ isServer }, [ preset, options ]) {
        // 直接オプションを変更する
        options.targets = isServer ? ... :  ...
        options.corejs = ...
        // 何も返さない
      }
    }
  }
}

もしくは、プリセットのリスト全体を返すことによってデフォルトの値を上書きします:

export default {
  build: {
    babel: {
      presets({ isServer }, [ preset, options ]) {
        return [
          [
            preset, {
              buildTarget: isServer ? 'server' : 'client',
              ...options
          }],
          [
            // 他のプリセット
          ]
        ]
      }
    }
  }
}

cache

  • 型: Boolean
  • デフォルト: false
  • ⚠️ 実験的機能です

terser-webpack-plugincache-loader でキャッシュを有効化します。

crossorigin

  • 型: String
  • デフォルト: undefined

生成された HTML の <link rel="stylesheet"> タグと <script> タグの crossorigin 属性を設定します。

詳細: CORS settings attributes

cssSourceMap

  • 型: boolean
  • デフォルト: 開発モードでは true でプロダクションモードでは false

CSS ソースマップのサポートを有効にします。

devMiddleware

  • 型: Object

利用できるオプションは webpack-dev-middleware を参照してください。

devtools

  • 型: boolean
  • デフォルト: false

vue-devtools を許可するかどうかを設定します。

既に nuxt.config.js などで有効化している場合は、このフラグに関係なく devtools が有効になります。

extend

クライアント及びサーバーのバンドルについて Webpack の設定を手動で拡張します。

  • 型: Function

extend メソッドは一度はサーバーのバンドルのため、一度はクライアントのバンドルのため、つまり二度呼び出されます。メソッドの引数は次のとおり:

  1. Webpack 設定オブジェクト
  2. 次のキーを持つオブジェクト(loaders を除きすべてブーリアン): isDev, isClient, isServer, loaders

警告: 提供される isClient および isServercontext で利用可能なキーとは別物です。 これらは非推奨 ではありません。ここでは process.client および process.server は undefined となるため使用しないでください。

例(nuxt.config.js):

export default {
  build: {
    extend (config, { isClient }) {
      // クライアントのバンドルの Webpack 設定のみを拡張する
      if (isClient) {
        config.devtool = '#source-map'
      }
    }
  }
}

デフォルトの Webpack の設定についてもう少し見てみたい場合は Nuxt.js の webpack ディレクトリ を参照してください。

extend 内の loaders

loaders は、build.loaders と同じオブジェクト構造を持っているため、extend 内部の loaders のオプションを変えることができます。

例(nuxt.config.js):

export default {
  build: {
    extend (config, { isClient, loaders: { vue } }) {
      // クライアントのバンドルの Webpack 設定のみを拡張する
      if (isClient) {
        vue.transformAssetUrls.video = ['src', 'poster']
      }
    }
  }
}

extractCSS

Vue のサーバーサイドレンダリング ガイドラインを利用して、共通の CSS を抽出できるようにします。

  • 型: Boolean
  • デフォルト: false

内部で extract-css-chunks-webpack-plugin が使われ、全ての CSS は別々のファイルに、通常はコンポーネントごとに1つ抽出されます。これは CSS と JavaScript を別々にキャッシュすることを可能にし、多くのグローバルまたは共通 CSS が存在する場合には試してみる価値があります。

注記: Vue 2.5.18 以前では、このオプションを使用したときにクリティカルな CSS のインポートを削除するバグがありました。

filenames

バンドルのファイル名をカスタマイズします。

  • 型: Object
  • デフォルト:
{
  app: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
  chunk: ({ isDev }) => isDev ? '[name].js' : '[chunkhash].js',
  css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css',
  img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[hash:7].[ext]',
  font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[hash:7].[ext]',
  video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[hash:7].[ext]'
}

この例ではチャンク名を数値の ID に変更します(nuxt.config.js):

export default {
  build: {
    filenames: {
      chunk: ({ isDev }) => isDev ? '[name].js' : '[id].[chunkhash].js'
    }
  }
}

manifest の使い方をより理解するためには webpack のドキュメント を参照してください。

friendlyErrors

  • 型: Boolean
  • デフォルト: true (上書きが有効)

FriendlyErrorsWebpackPluginによって提供される上書きを有効にするか無効にするかを設定します。

hardSource

  • 型: Boolean
  • デフォルト: false
  • ⚠️ 実験的機能です

キャッシュを改善するために HardSourceWebpackPlugin を有効にします。

hotMiddleware

  • 型: Object

利用できるオプションは webpack-hot-middleware を参照してください。

html.minify

  • 型: Object
  • デフォルト:
{
  collapseBooleanAttributes: true,
  decodeEntities: true,
  minifyCSS: true,
  minifyJS: true,
  processConditionalComments: true,
  removeEmptyAttributes: true,
  removeRedundantAttributes: true,
  trimCustomFragments: true,
  useShortDoctype: true
}

情報: html.minifyに変更を加えても、それらはデフォルトとマージされません!

ビルドプロセス中に作成された HTML ファイルのミニファイに使われる html-minifier プラグインの設定(全てのモードに適用される)。

indicator

開発モードでホットリローディングのビルドインジケーターを表示します(v2.8.0+ から利用可能)

  • 型: Boolean
  • デフォルト: true

nuxt-build-indicator

loaders

webpack loaders を統合した Nuxt.js のカスタマイズオプション

  • 型: Object
  • デフォルト:
{
  file: {},
  fontUrl: { limit: 1000 },
  imgUrl: { limit: 1000 },
  pugPlain: {},
  vue: {
    transformAssetUrls: {
      video: 'src',
      source: 'src',
      object: 'src',
      embed: 'src'
    }
  },
  css: {},
  cssModules: {
    localIdentName: '[local]_[hash:base64:5]'
  },
  less: {},
  sass: {
    indentedSyntax: true
  },
  scss: {},
  stylus: {},
  vueStyle: {}
}

注意: nuxt.config.js の設定で指定することに加え、build.extend で変更することもできます。

loaders.file

詳細は file-loader options を参照してください。

loaders.fontUrl and loaders.imgUrl

詳細は url-loader options を参照してください。

loaders.pugPlain

詳細は pug-plain-loader または Pug compiler options を参照してください。

loaders.vue

詳細は vue-loader options を参照してください。

loaders.css と loaders.cssModules

詳細は css-loader options を参照してください。 注意: cssModules は、CSS Modules を使うための loader オプションです。

loaders.less

Less specific オプションは、loaders.less を介して less-loader に渡すことができます。dash-case で利用可能な全てのオプションについては Less documentation を参照してください。

loaders.sass と loaders.scss

利用可能な全てのオプションについては Node Sass documentation を参照してください。 注意: loaders.sassSass Indented Syntax 用です。

loaders.vueStyle

詳細は vue-style-loader options を参照してください。

optimization

  • 型: Object

  • デフォルト:

    {
      minimize: true,
      minimizer: [
        // terser-webpack-plugin
        // optimize-css-assets-webpack-plugin
      ],
      splitChunks: {
        chunks: 'all',
        automaticNameDelimiter: '.',
        name: undefined,
        cacheGroups: {}
      }
    }

dev または analyze モードでは、splitChunks.name のデフォルト値は true になっています。

カスタマイズされたプラグインの配列に minimizer を設定するか、minimizefalse にすることで全ての minimizer を無効にできます。 (minimize はデフォルトで開発用に無効になっています)

Webpack の最適化を参照してください。

optimizeCSS

  • 型: Object または Boolean
  • デフォルト:
    • false
    • extractCSS が有効の場合は {}

OptimizeCSSAssets プラグインのオプションです。

NMFR/optimize-css-assets-webpack-plugin を参照してください。

parallel

  • 型: Boolean
  • デフォルト: false
  • ⚠️ 実験的機能です

webpack のビルドでthread-loader を有効にします。

plugins

Webpack のプラグインを追加します。

  • 型: Array
  • デフォルト: []

例(nuxt.config.js):

import webpack from 'webpack'
import { version } from './package.json'
export default {
  build: {
    plugins: [
      new webpack.DefinePlugin({
        'process.VERSION': version
      })
    ]
  }
}

postcss

PostCSS Loader プラグインをカスタマイズします。

  • 型: ArrayObject(推奨)、Function または Boolean

    注意: Nuxt.js は PostCSS Preset Env を適用しました。デフォルトでは、Stage 2 featuresAutoprefixer が有効になっています。build.postcss.preset を使うことで設定が出来ます

  • デフォルト:

    {
      plugins: {
        'postcss-import': {},
        'postcss-url': {},
        'postcss-preset-env': this.preset,
        'cssnano': { preset: 'default' } // 開発モードでは無効化されています
      },
      order: 'presetEnvAndCssnanoLast',
      preset: {
        stage: 2
      }
    }

カスタムプラグイン設定は、デフォルトのプラグイン設定とマージされます (Object のかわりに Array を使っている場合を除く)。

例(nuxt.config.js):

export default {
  build: {
    postcss: {
      plugins: {
        // `postcss-url` の無効化
        'postcss-url': false,
        // plugin の追加
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {}
      },
      preset: {
        autoprefixer: {
          grid: true
        }
      }
    }
  }
}

postcss の設定が Object 型の場合、プラグインの順番の定義に orderを利用できます:

  • 型: Array (順序付けされたプラグイン名), String (順序付けされたプリセット名), Function
  • デフォルト: cssnanoLast (最後に cssnano を配置する)

例 (nuxt.config.js):

export default {
  build: {
    postcss: {
      // プリセット名
      order: 'cssnanoLast',
      // 順序付けされたプラグイン名の配列
      order: ['postcss-import', 'postcss-preset-env', 'cssnano']
      // プラグインの順番を算出するための関数
      order: (names, presets) => presets.cssnanoLast(names)
    }
  }
}

profile

  • 型: Boolean
  • デフォルト: コマンドライン引数 --profile で有効にします

WebpackBar の profiler で有効にします。

publicPath

Nuxt.js ではパフォーマンスの最大化のため dist ディレクトリ内のファイルを CDN にアップロードすることも可能です。そのためにはまず publicPath に CDN を指定します。

  • 型: String
  • デフォルト: '/_nuxt/'

例(nuxt.config.js):

export default {
  build: {
    publicPath: 'https://cdn.nuxtjs.org'
  }
}

設定後、nuxt build を実行する際に .nuxt/dist/client ディレクトリの内容を CDN にアップロードしてください。

quiet

ビルド出力ログの大半を抑制します

  • 型: Boolean
  • デフォルト: std-env によって CI または test 環境で検出された際に有効になります

splitChunks

  • 型: Object

  • デフォルト:

    {
      layouts: false,
      pages: true,
      commons: true
    }

layoutpagescommons で分割したコードの場合(共通ライブラリ: vue|vue-loader|vue-router|vuex...)

ssr

SSR レンダラー用の webpack バンドルを作成します。

  • 型: Boolean
  • ユニバーサルモードでのデフォルト値は true、spa モードでのデフォルト値は false です

このオプションは、提供されていない場合は mode 値に基づいて自動的に設定されます。

styleResources

  • 型: Object
  • デフォルト: {}

警告 このプロパティは非推奨です。 パフォーマンスおよび開発体験の向上のために、代わりに style-resources-module を使用してください。

毎回インポートせずに変数やミックスインをページに挿入する必要がある場合に便利です。

Nuxt.js はこの動作を実現するために https://github.com/yenshih/style-resources-loader を使用します。

特定のプリプロセッサに含めるパターン/パスを指定する必要があります: lesssassscssstylus

:警告:ここではパスのエイリアス(~@)を使用することができないため、相対パスまたは絶対パスを使用する必要があります。

nuxt.config.js:

{
  build: {
    styleResources: {
      scss: './assets/variables.scss',
      less: './assets/*.less',
      // sass: ...,
      // scss: ...
      options: {
        // https://github.com/yenshih/style-resources-loader#options の
        // `patterns` プロパティ以外を参照してください。
      }
    }
  }
}

templates

Nuxt.js では、設定に基づいてレンダリングされる独自のテンプレートを提供できます。この機能はモジュールを使用する場合にとりわけ便利です。

  • 型: Array

例 (nuxt.config.js):

export default {
  build: {
    templates: [
      {
        src: '~/modules/support/plugin.js', // `src` は絶対パスもしくは相対パスで指定してください
        dst: 'support.js', // `dst` は `.nuxt` ディレクトリからみた相対パスです
        options: { // Options は `options` キーとしてテンプレートに提供されます
          live_chat: false
        }
      }
    ]
  }
}

テンプレートは lodash.template を使ってレンダリングされます。こちらでより詳細な使い方を知ることができます。

terser

  • 型: Object または Boolean
  • デフォルト:
{
  parallel: true,
  cache: false,
  sourceMap: false,
  extractComments: {
    filename: 'LICENSES'
  },
  terserOptions: {
    output: {
      comments: /^\**!|@preserve|@license|@cc_on/
    }
  }
}

Terser プラグインのオプションです。 false を設定するとこのプラグインは無効になります。

soruceMap は webpack の config.devtoolsource-?map と一致した際に有効になります。

webpack-contrib/terser-webpack-plugin を参照してください。

transpile

  • 型: Array<String | RegExp | Function>
  • デフォルト: []

特定の依存関係を Babel で変換したい場合、build.transpile を追加することができます。transpile の項目は、マッチする依存ファイル名の文字列または正規表現オブジェクトになります。

v2.9.0 以降からは、関数を使用して条件付きでトランスパイルすることもできます。関数はオブジェクト({ isDev, isServer, isClient, isModern, isLegacy })を受け取ります:

{
  build: {
    transpile: [
      ({ isLegacy }) => isLegacy && 'ky'
    ]
  }
}

vueLoader

注意: この設定は Nuxt 2.0 から削除されました。build.loaders.vue をかわりに使用してください。

  • 型: Object

  • デフォルト

    {
      productionMode: !this.options.dev,
      transformAssetUrls: {
        video: 'src',
        source: 'src',
        object: 'src',
        embed: 'src'
      }
    }

Vue Loader Options を指定します。

watch

監視や変更後に再生成を行うカスタムファイルを提供することができます。この機能はモジュールを使用する場合にとりわけ便利です。

  • 型: Array<String>
export default {
  build: {
    watch: [
      '~/.nuxt/support.js'
    ]
  }
}

By default, the build process does not scan files inside symlinks. This boolean includes them, thus allowing usage of symlinks inside folders such as the "pages" folder, for example.

  • Type: Boolean
export default {
  build: {
    followSymlinks: false
  }
}

Platinum Sponsors

Storyblok
Support Us