import webpack from 'webpack' // 載入webpack
import SpriteLoaderPlugin from 'svg-sprite-loader/plugin' // SVG 套件

export default {
  mode: 'universal',
  target: 'server',
  /*
   * head 設定
   * 個別頁面head資訊可在.vue裡設定
   * ※ hid 為可以覆蓋的 meta，例如在index.vue裡設定不同的description，預設的description會被覆蓋
   */
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1, shrink-to-fit=no' },
      { hid: 'description', name: 'description', content: '' },
      { hid: 'og:title', propety: 'og:title', content: '' },
      { hid: 'og:url', propety: 'og:url', content: '' },
      { hid: 'og:site_name', propety: 'og:site_name', content: '' },
      { hid: 'og:description', propety: 'og:description', content: '' },
      { hid: 'og:image', propety: 'og:image', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/...' } // 也可從CSS引入
    ],
  },
  /*
   * 公用樣式
   * 引入sass或SCSS，會自動編譯成CSS
   */
  css: [
    '@/assets/sass/style.sass'
  ],
  /*
   * 載入套件
   * 個別組件使用之套件可在.vue裡設定
   */
  plugins: [
    { src: '@/plugins/global.js', ssr: true }, // 引入公用組件，ssr須為true
    { src: '@/plugins/jquery.js', ssr: false },
    { src: '@/plugins/bootstrap.js', ssr: false }
  ],
  components: true,
  buildModules: [],
  /* 使用模組 */
  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/style-resources',
    'nuxt-i18n'
  ],
  /*
   * bootstrap-vue 設定
   * 關閉自動引入bootstrap CSS
   */
  bootstrapVue: {
    bootstrapCSS: false,
    bootstrapVueCSS: false
  },
  /*
   * style-resource 設定
   * 將scss變數/mixin傳送至所有CSS
   * !! 只需引入需要使用的檔案，否則CSS會一直重複 !!
   */
  styleResources: {
    scss: [
      'bootstrap/scss/_functions.scss',
      'bootstrap/scss/_variables.scss',
      'bootstrap/scss/_mixins.scss',
      'bootstrap-vue/src/_variables.scss',
      '@/assets/sass/config/*.scss'
    ],
    sass: [
      '@/assets/sass/config/*.sass'
    ]
  },
  /*
   * nuxt-i18n 設定
   * 語系設定，需在locales資料夾建立語系資料
   */
  i18n: {
    locales: ['zh-Hant', 'zh-Hans', 'vi', 'th'],
    defaultLocale: 'zh-Hant',
    vueI18n: {
      fallbackLocale: 'zh-Hant',
      messages: {
        'zh-Hant': require('./locales/zh-Hant.json'),
        'zh-Hans': require('./locales/zh-Hans.json'),
        'vi': require('./locales/vi.json'),
        'th': require('./locales/th.json')
      }
    }
  },
  /* 生產模式 */
  build: {
    extractCSS: true, // 將CSS打包為獨立.css檔，否則會直接生成<style>標籤
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        // svg 設定
        const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
        svgRule.test = /\.(png|jpe?g|gif|webp)$/
        config.module.rules.push({
          test: /\.svg$/,
          loader: 'svg-sprite-loader',
          options: {
            symbolId: '[name]'
          }
        })
      }
    },
    plugins: [
      // webpack 設定
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'window.$': 'jquery',
      }),
      // svg 套件
      new SpriteLoaderPlugin()
    ],
  }
}

// 來源為 assets 或其他資料夾
'@/assets/images/path/to/demo.jpg'
'~/assets/images/path/to/demo.jpg'

// 來源為 static 資料夾
'/path/to/demo.jpg' // 不須加static