Nuxt.js ではウェブアプリケーションを自由にビルドできるよう Webpack 設定をカスタマイズできます。
Nuxt.js では webpack-bundle-analyzer を使ってバンドルファイルと最適化の仕方を視覚化できます。
Boolean
または Object
false
オブジェクトの場合は、利用できるプロパティは こちら を参照してください。
例(nuxt.config.js
):
export default {
build: {
analyze: true,
// または
analyze: {
analyzerMode: 'static'
}
}
}
情報: nuxt build --analyze
または nuxt build -a
コマンドを使って、アプリケーションをビルドしてバンドルアナライザを http://localhost:8888 で起動できます。
JavaScript や Vue ファイルのために Babel の設定をカスタマイズします。
.babelrc
はデフォルトで無視されます。
型: Object
babel-loader
の options と babel
の options を参照してください
デフォルト:
{
babelrc: false,
cacheDirectory: undefined,
presets: ['@nuxt/babel-preset-app']
}
@nuxt/babel-preset-app のデフォルトターゲットは client
ビルドでは ie: '9'
、server
ビルドでは node: 'current'
になります。
Function
Object
: { isServer: true | false }Array
:@nuxt/babel-preset-app
@nuxt/babel-preset-app
の options
メモ: 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
}],
[
// 他のプリセット
]
]
}
}
}
}
Boolean
false
terser-webpack-plugin と cache-loader でキャッシュを有効化します。
String
undefined
生成された HTML の <link rel="stylesheet">
タグと <script>
タグの crossorigin
属性を設定します。
boolean
true
でプロダクションモードでは false
CSS ソースマップのサポートを有効にします。
Object
利用できるオプションは webpack-dev-middleware を参照してください。
boolean
false
vue-devtools を許可するかどうかを設定します。
既に nuxt.config.js などで有効化している場合は、このフラグに関係なく devtools が有効になります。
クライアント及びサーバーのバンドルについて Webpack の設定を手動で拡張します。
Function
extend メソッドは一度はサーバーのバンドルのため、一度はクライアントのバンドルのため、つまり二度呼び出されます。メソッドの引数は次のとおり:
loaders
を除きすべてブーリアン): isDev
, isClient
, isServer
, loaders
警告:
提供される isClient
および isServer
は context
で利用可能なキーとは別物です。
これらは非推奨 ではありません。ここでは 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 ディレクトリ を参照してください。
loaders
は、build.loaders と同じオブジェクト構造を持っているため、extend
内部の loaders のオプションを変えることができます。
例(nuxt.config.js
):
export default {
build: {
extend (config, { isClient, loaders: { vue } }) {
// クライアントのバンドルの Webpack 設定のみを拡張する
if (isClient) {
vue.transformAssetUrls.video = ['src', 'poster']
}
}
}
}
Vue のサーバーサイドレンダリング ガイドラインを利用して、共通の CSS を抽出できるようにします。
Boolean
false
内部で extract-css-chunks-webpack-plugin
が使われ、全ての CSS は別々のファイルに、通常はコンポーネントごとに1つ抽出されます。これは CSS と JavaScript を別々にキャッシュすることを可能にし、多くのグローバルまたは共通 CSS が存在する場合には試してみる価値があります。
注記: Vue 2.5.18 以前では、このオプションを使用したときにクリティカルな CSS のインポートを削除するバグがありました。
バンドルのファイル名をカスタマイズします。
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 documentation を参照してください。
Boolean
true
(上書きが有効)FriendlyErrorsWebpackPluginによって提供される上書きを有効にするか無効にするかを設定します。
Boolean
false
キャッシュを改善するために HardSourceWebpackPlugin を有効にします。
Object
利用できるオプションは webpack-hot-middleware を参照してください。
Object
{
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
trimCustomFragments: true,
useShortDoctype: true
}
情報: html.minify
に変更を加えても、それらはデフォルトとマージされません!
ビルドプロセス中に作成された HTML ファイルのミニファイに使われる html-minifier プラグインの設定(全てのモードに適用される)。
開発モードでホットリローディングのビルドインジケーターを表示します(
v2.8.0+
から利用可能)
型: Boolean
デフォルト: true
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 で変更することもできます。
詳細は file-loader options を参照してください。
詳細は url-loader options を参照してください。
詳細は pug-plain-loader または Pug compiler options を参照してください。
詳細は vue-loader options を参照してください。
詳細は css-loader options を参照してください。 注意: cssModules は、CSS Modules を使うための loader オプションです。
Less specific オプションは、
loaders.less
を介してless-loader
に渡すことができます。dash-case で利用可能な全てのオプションについては Less documentation を参照してください。
利用可能な全てのオプションについては Node Sass documentation を参照してください。 注意:
loaders.sass
は Sass Indented Syntax 用です。
typescript ファイルと Vue SFC の
lang="ts"
用のローダーです。 詳細は ts-loader options を参照してください。
詳細は ts-loader options を参照してください。
詳細は vue-style-loader options を参照してください。
型: 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
を設定するか、minimize
を false
にすることで全ての minimizer を無効にできます。
(minimize
はデフォルトで開発用に無効になっています)
Webpack の最適化を参照してください。
Object
または Boolean
false
{}
OptimizeCSSAssets プラグインのオプションです。
NMFR/optimize-css-assets-webpack-plugin を参照してください。
Boolean
false
webpack のビルドでthread-loader を有効にします。
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 Loader プラグインをカスタマイズします。
型: Array
、Object
(推奨)、Function
または Boolean
注意: Nuxt.js は PostCSS Preset Env を適用しました。デフォルトでは、Stage 2 features と Autoprefixer が有効になっています。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)
}
}
}
Boolean
--profile
で有効にしますWebpackBar の profiler で有効にします。
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 にアップロードしてください。
ビルド出力ログの大半を抑制します
Boolean
CI
または test
環境で検出された際に有効になります型: Object
デフォルト:
{
layouts: false,
pages: true,
commons: true
}
layout
、pages
や commons
で分割したコードの場合(共通ライブラリ: vue|vue-loader|vue-router|vuex...)
SSR レンダラー用の webpack バンドルを作成します。
Boolean
true
、spa モードでのデフォルト値は false
ですこのオプションは、提供されていない場合は mode
値に基づいて自動的に設定されます。
Object
{}
警告 このプロパティは非推奨です。 パフォーマンスおよび開発体験の向上のために、代わりに style-resources-modules を使用してください。
毎回インポートせずに変数やミックスインをページに挿入する必要がある場合に便利です。
Nuxt.js はこの動作を実現するために https://github.com/yenshih/style-resources-loader を使用します。
特定のプリプロセッサに含めるパターン/パスを指定する必要があります: less
、sass
、scss
、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` プロパティ以外を参照してください。
}
}
}
}
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
を使ってレンダリングされます。こちらでより詳細な使い方を知ることができます。
Object
または Boolean
{
parallel: true,
cache: false,
sourceMap: false,
extractComments: {
filename: 'LICENSES'
},
terserOptions: {
output: {
comments: /^\**!|@preserve|@license|@cc_on/
}
}
}
Terser プラグインのオプションです。 false
を設定するとこのプラグインは無効になります。
soruceMap
は webpack の confing.devtool
が source-?map
と一致した際に有効になります。
webpack-contrib/terser-webpack-plugin を参照してください。
Array<string | RegExp>
[]
特定の依存関係を Babel で変換したい場合、build.transpile
を追加することができます。transpile の項目は、マッチする依存ファイル名の文字列または正規表現オブジェクトになります。
Nuxt.js の TypeScript のサポートをカスタマイズします。
重要: プロジェクト内で TypeScript Support
が設定されていない場合、このプロパティは無視されます。
型: Object
デフォルト:
{
typeCheck: true,
ignoreNotFoundWarnings: false
}
TypeScript の型チェックを別プロセスで実行することを有効にします。
Boolean
または Object
true
もし有効の場合、Nuxt.js は fork-ts-checker-webpack-plugin を使って型チェックを行います。
Object
を使用してプラグインのオプションを上書きすることができます。または false
に設定することで無効にすることも出来ます。
typescript の not foundの warning を抑制します。
Boolean
false
有効にすると、export ... was not found ...
の warning を抑制することが出来ます。
背景についてはこちらも参照してください。 https://github.com/TypeStrong/ts-loader/issues/653
警告: このプロパティは本来見たい warning も抑制する可能性があります。設定には注意してください。
注意: この設定は Nuxt 2.0 から削除されました。
build.loaders.vue
を変わりに使用してください。
型: Object
デフォルト
{
productionMode: !this.options.dev,
transformAssetUrls: {
video: 'src',
source: 'src',
object: 'src',
embed: 'src'
}
}
Vue Loader Options を指定します。
監視や変更後に再生成を行うカスタムファイルを提供することができます。この機能はモジュールを使用する場合にとりわけ便利です。
Array<String>
export default {
build: {
watch: [
'~/.nuxt/support.js'
]
}
}
間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する