Properti build

Nuxt.js memungkinkan Anda menyesuaikan konfigurasi webpack untuk membangun aplikasi web Anda sesuai keinginan.

analyze

Nuxt.js menggunakan webpack-bundle-analyzer untuk memvisualisasikan bundel milik Anda dan bagaimana cara mengoptimalkannya.

  • Type: Boolean atau Object
  • Default: false

Jika itu merupakan Object, lihat properti yang tersedia di sini.

Contoh (nuxt.config.js):

module.exports = {
  build: {
    analyze: true,
    // atau
    analyze: {
      analyzerMode: 'static'
    }
  }
}

Info: anda bisa menggunakan perintah nuxt build --analyze atau nuxt build -a untuk mem'build aplikasi dan menjalankan bundle analyzer pada http://localhost:8888.

babel

Kostumisasi konfigurasi Babel untuk file-file JavaScript dan Vue.

  • Type: Object

  • Default:

      {
        presets: ['@nuxt/babel-preset-app']
      }

Contoh (nuxt.config.js):

module.exports = {
  build: {
    babel: {
      presets: ['es2015', 'stage-0']
    }
  }
}

cssSourceMap

  • Type: boolean
  • Default: true untuk dev (development) dan false untuk production.

Mengaktifkan dukungan CSS Source Map

devMiddleware

  • Type: Object

Lihat webpack-dev-middleware untuk opsi yang tersedia.

extend

Extend konfigurasi webpack secara manual untuk bundel client & server.

  • Type: Function

Extend dipanggil (call) dua kali, satu kali untuk bundel server, dan satu kali untuk bundel klien. Uraian dari metode ini adalah:

  1. Konfigurasi object pada webpack,
  2. Object dengan keys berikut ini (semuanya boolean): isDev, isClient, isServer.

Contoh (nuxt.config.js):

module.exports = {
  build: {
    extend (config, { isClient }) {
      // hanya mengExtend webpack config untuk client-bundle
      if (isClient) {
        config.devtool = 'eval-source-map'
      }
    }
  }
}

Jika anda ingin melihat lebih lanjut mengenai konfigurasi default webpack, lihat direktori webpack kami.

extractCSS

Mengaktifkan Common CSS Extraction menggunakan Vue Server Renderer. Baca panduan.

  • Type: Boolean
  • Default: false

Menggunakan extract-text-webpack-plugin untuk mengekstrak CSS menjadi beberapa bagian file-file CSS (otomatis terinjeksi dengan template), yang memungkinkan file ter-cache secara terpisah. Ini disarankan bila ada banyak CSS bersama (shared CSS). CSS di dalam komponen async akan tetap digabung sebagai string JavaScript dan ditangani oleh vue-style-loader.

filenames

Kostumisasi bundle filenames (nama-nama file).

  • Type: Object

  • Default:

      {
        css: 'common.[contenthash].css',
        manifest: 'manifest.[hash].js',
        vendor: 'common.[chunkhash].js',
        app: 'app.[chunkhash].js',
        chunk: '[name].[chunkhash].js'
      }

Contoh berikut ini mengubah nama-nama chunk menjadi id numerik (nuxt.config.js):

module.exports = {
  build: {
    filenames: {
      chunk: '[id].[chunkhash].js'
    }
  }
}

Untuk lebih memahami penggunaan manifes dan vendor, lihat dokumentasi webpack ini.

hotMiddleware

  • Type: Object

Lihat webpack-hot-middleware untuk opsi yang tersedia.

plugins

Menambahkan plugin-plugin webpack

  • Type: Array
  • Default: []

Contoh (nuxt.config.js):

const webpack = require('webpack')

module.exports = {
  build: {
    plugins: [
      new webpack.DefinePlugin({
        'process.VERSION': require('./package.json').version
      })
    ]
  }
}

postcss

Kostumisasi plugin-plugin PostCSS Loader.

  • Type: Array, Object (direkomendasikan), Function atau Boolean

    Catatan: Ketika preset standarnya adalah OK dan cukup fleksibel untuk kasus penggunaan normal, penggunaan yang direkomendasikan oleh vue-loader adalah menggunakan file postcss.config.js pada proyek Anda. Dengan membuat file tersebut maka akan otomatis terdeteksi dan pilihan ini terabaikan.

  • Default:

      {
        plugins: {
        'postcss-import' : {},
        'postcss-url': {},
        'postcss-cssnext': {}
        }
      }

Contoh (nuxt.config.js):

module.exports = {
  build: {
    postcss: {
      plugins: {
        // Disable `postcss-url`
      'postcss-url': false

      // Kostumisasi `postcss-cssnext` default options
      'postcss-cssnext': {
        features: {
          customProperties: false
        }
      }

      // Add some plugins
      'postcss-nested': {},
      'postcss-responsive-type': {}
      'postcss-hexrgba': {}
      }
    }
  }
}

publicPath

Nuxt.js memungkinkan Anda mengunggah file dist Anda ke CDN Anda untuk performa yang maksimal, cukup dengan atur publicPath ke CDN Anda.

  • Type: String
  • Default: '/_nuxt/'

Contoh (nuxt.config.js):

module.exports = {
  build: {
    publicPath: 'https://cdn.nuxtjs.org'
  }
}

Kemudian, saat meluncurkan (launcing) nuxt build , unggah konten dari direktori .nuxt/dist/ ke CDN dan lihat hasilnya!

ssr

Membuat bundel webpack khusus untuk perender SSR.

  • Type: Boolean
  • Default: true untuk mode Universal dan false untuk mode SPA

Pengaturan ini dipilih secara otomatis berdasarkan nilai mode jika tidak disediakan.

templates

Nuxt.js memungkinkan Anda menyediakan template Anda sendiri yang akan dirender berdasarkan konfigurasi Nuxt. Fitur ini sangat berguna untuk digunakan dengan modul .

  • Type: Array

Contoh (nuxt.config.js):

module.exports = {
  build: {
    templates: [
      {
        src: '~/modules/support/plugin.js', // `src` can be absolute or relative
        dst: 'support.js', // `dst` is relative to project `.nuxt` dir
        options: { // Options are provided to template as `options` key
          live_chat: false
        }
      }
    ]
  }
}

Template dirender menggunakan lodash.template. Anda dapat mempelajari lebih lanjut tentang cara menggunakannya di sini .

vendor

Nuxt.js memungkinkan Anda menambahkan modul ke dalam file vendor.bundle.js untuk mengurangi ukuran bundel aplikasi. Hal ini sangat membantu saat menggunakan modul eksternal (seperti axios misalnya).

  • Type: Array

Untuk menambahkan modul/file di dalam bundel vendor, tambahkan key build.vendor di dalam nuxt.config.js :

module.exports = {
  build: {
    vendor: ['axios']
  }
}

Anda juga bisa membuat file path, seperti kustom librari yang sudah Anda buat:

module.exports = {
  build: {
    vendor: [
      'axios',
      '~/plugins/my-lib.js'
    ]
  }
}

watch

Anda dapat menyediakan file kostum untuk dapat memantau dan memperbaruinya setelah melakukan perubahan pada file tersebut. Fitur ini sangat berguna untuk digunakan bersama modul .

  • Type: Array<String>
module.exports = {
  build: {
    watch: [
      '~/.nuxt/support.js'
    ]
  }
}

Jumpa kesalahan atau ingin berkontribusi pada dokumentasi ini? Sunting halaman ini di GitHub!