build プロパティ

Nuxt.js では、webpack の設定をカスタマイズして web アプリケーションを思いのままに構築することができます。

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 を使って実行できます。

corejs

Nuxt@2.14 以降、Nuxt は core-js の現在のバージョンを自動的に検出します。また、使用するバージョンを指定することもできます。

  • 型: number | string(有効な値は 'auto'2 そして 3 です)
  • デフォルト: 'auto'

babel

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

  • 型: Object

  • babel-loader オプションbabel オプション を参照してください

  • デフォルト:

    {
      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 ]) {
        // change options directly
        options.targets = isServer ? ... :  ...
        options.corejs = ...
        // return nothing
      }
    }
  }
}

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

export default {
  build: {
    babel: {
      presets({ isServer }, [preset, options]) {
        return [
          [
            preset,
            {
              targets: isServer ? ... :  ...,
              ...options
            }
          ],
          [
            // Other presets
          ]
        ]
      }
    }
  }
}

cache

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

terser-webpack-plugincache-loader を使ってキャッシュを有効化します

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 を除きすべてブーリアン): isDevisClientisServerloaders

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

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

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

extend 内の loaders

loadersbuild.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 または Object
  • デフォルト: false

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

例(nuxt.config.js):

export default {
  build: {
    extractCSS: true,
    // または
    extractCSS: {
      ignoreOrder: true
    }
  }
}

注意: Vue 2.5.18 以前では、このオプションを使用したときに重要な CSS のインポートが削除されるバグがありました。

全ての CSS を 1 つのファイルに抽出したい場合があります。このための回避策があります:

全てのファイルを 1 つのファイルに抽出することはおすすめしません。複数の CSS ファイルに抽出する方が、キャッシングとプリロードの分離には適しています。また、必要なリソースのみをダウンロードして解決することによって、ページのパフォーマンスを向上させることもできます。

export default {
  build: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
}

filenames

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

  • 型: Object

  • デフォルト:

    {
      app: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js',
      chunk: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js',
      css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css',
      img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[contenthash:7].[ext]',
      font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[contenthash:7].[ext]',
      video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[contenthash:7].[ext]'
    }
    

この例ではチャンク名を数値の id に変更します:

nuxt.config.js
export default {
  build: {
    filenames: {
      chunk: ({ isDev }) => (isDev ? '[name].js' : '[id].[contenthash].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

開発モードにおいて hot module replacement のビルドインジケータを表示する(v2.8.0 以上から利用可能)

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

nuxt-build-indicator

loaders

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

  • 型: 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 と 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 のドキュメントを参照してください。

loaders.sass と loaders.scss

利用可能な Sass のオプションについては Sass のドキュメントを参照してください。注意: 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
    • {} when extractCSS is enabled

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 プラグインをカスタマイズします

  • 型: Array(レガシーな場合はデフォルトで上書きします)、Object(推奨)、Function または Boolean

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

  • デフォルト:

    nuxt.config.js
    {
      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,
        // プラグインの追加
        '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)
    }
  }
}

postcss plugins と nuxt-tailwindcss

nuxt-tailwindcss の設定で postcss プラグイン(例えば postcss-pxtorem)を適用したい場合、順番を変更して最初に tailwindcss を読み込む必要があります。

この設定は nuxt-purgecss には影響しません。

nuxt.config.js
import { join } from 'path'

export default {
  // ...
  build: {
    postcss: {
      plugins: {
        tailwindcss: join(__dirname, 'tailwind.config.js'),
        'postcss-pxtorem': {
          propList: ['*', '!border*']
        }
      }
    }
  }
}

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

  • デフォルト:

    nuxt.config.js
    export default {
      build: {
        splitChunks: {
          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 を使用しています。

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

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

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
  • デフォルト:
nuxt.config.js
{
  parallel: true,
  cache: false,
  sourceMap: false,
  extractComments: {
    filename: 'LICENSES'
  },
  terserOptions: {
    output: {
      comments: /^\**!|@preserve|@license|@cc_on/
    }
  }
}

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

sourceMap は 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 })を受け取ります:

nuxt.config.js
{
  build: {
    transpile: [({ isLegacy }) => isLegacy && 'ky']
  }
}

vueLoader

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

  • 型: Object

  • デフォルト:

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

Vue Loader オプションを指定します。

watch

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

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

デフォルトでは、ビルドプロセスはシンボリックリンク内のファイルをスキャンしません。この boolean 値はスキャンするかどうかを含むため、followSymlinks を true に設定すると例えば「pages」フォルダなどでフォルダ内のシンボリックリンクを使うことができます。

  • 型: Boolean
nuxt.config.js
export default {
  build: {
    followSymlinks: true
  }
}

Contributors

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する