Nuxt/lib/webpack/client.config.js

'use strict'

import { each } from 'lodash'
import webpack from 'webpack'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import ProgressBarPlugin from 'progress-bar-webpack-plugin'
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
import base from './base.config.js'
import { resolve } from 'path'

// offline plugin copy generated assets to static directory
function OfflinePluginCopyAssetsPlugin(assets, toDir) {
  this.assets = assets
  this.toDir = toDir
}
OfflinePluginCopyAssetsPlugin.prototype.apply = function(compiler) {
  compiler.plugin('after-emit', function(compilation, callback) {
    const assets = this.assets.length > 0 ? this.assets : []

    if (!fs.existsSync(this.toDir)){
      fs.mkdirSync(this.toDir)
      fs.mkdirSync(`${this.toDir}/appcache`)
    }

    let renamePromises = []
    assets.forEach((asset) => {
      renamePromises.push(rename(`.nuxt/dist/${asset}`, `${this.toDir}/${asset}`))
    })

    Promise.all(renamePromises)
    .then(() => {
      console.log('\noffline content to static directory...')
    })
    .catch((error) => {
      console.error('\noffline-plugin copy error', error)
    });
  }.bind(this));
}

/*
|--------------------------------------------------------------------------
| Webpack Client Config
|
| Generate public/dist/client-vendor-bundle.js
| Generate public/dist/client-bundle.js
|
| In production, will generate public/dist/style.css
|--------------------------------------------------------------------------
*/
export default function () {
  let config = base.call(this, { isClient: true })

  // Entry
  config.entry.app = resolve(this.dir, '.nuxt', 'client.js')

  // Add vendors
  if (this.options.store) {
    config.entry.vendor.push('vuex')
  }
  config.entry.vendor = config.entry.vendor.concat(this.options.build.vendor)

  // Output
  config.output.path = resolve(this.dir, '.nuxt', 'dist')
  config.output.filename = this.options.build.filenames.app

  // env object defined in nuxt.config.js
  let env = {}
  each(this.options.env, (value, key) => {
    env['process.env.' + key] = (typeof value === 'string' ? JSON.stringify(value) : value)
  })
  // Webpack plugins
  config.plugins = (config.plugins || []).concat([
    // strip comments in Vue code
    new webpack.DefinePlugin(Object.assign(env, {
      'process.env.NODE_ENV': JSON.stringify(this.dev ? 'development' : 'production'),
      'process.BROWSER_BUILD': true,
      'process.SERVER_BUILD': false
    })),
    // Extract vendor chunks for better caching
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: this.options.build.filenames.vendor
    })
  ])

  // client bundle progress bar
  config.plugins.push(
    new ProgressBarPlugin()
  )

  // Production client build
  if (!this.dev) {
    config.plugins.push(
      // Use ExtractTextPlugin to extract CSS into a single file
      new ExtractTextPlugin({
        filename: this.options.build.filenames.css,
        allChunks: true
      }),
      // This is needed in webpack 2 for minifying CSS
      new webpack.LoaderOptionsPlugin({
        minimize: true
      }),
      // Minify JS
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    )
  }
  // Extend config
  if (typeof this.options.build.extend === 'function') {
    this.options.build.extend(config, {
      dev: this.dev,
      isClient: true
    })
  }
  // Offline-plugin integration
  if (!this.dev && this.options.offline) {
    const offlineOpts = typeof this.options.offline === 'object' ? this.options.offline : {}
    config.plugins.push(
      new OfflinePlugin(offlineOpts),
      new OfflinePluginCopyAssetsPlugin(
        ['sw.js', 'appcache/manifest.appcache', 'appcache/manifest.html'
      ], 'static')
    )
  }
  // Webpack Bundle Analyzer
  if (!this.dev && this.options.build.analyze) {
    let options = {}
    if (typeof this.options.build.analyze === 'object') {
      options = this.options.build.analyze
    }
    config.plugins.push(
      new BundleAnalyzerPlugin(options)
    )
  }
  return config
}