Nuxt bundling - Githubissues

kabootit commented 6 years ago

Any chance could expand the bundling section to include Nuxt specifics? Gave it a solid go — a bit too much going on with the Nuxt webpack setup for me to figure it out.

amirrustam commented 6 years ago

By "bundling section" do you mean the default webpack config?: https://github.com/bahmutov/cypress-vue-unit-test/blob/master/preprocessor/webpack.js

kabootit commented 6 years ago

That was my starting point. Stumbling on how to get there with Nuxt's webpack configs:

// ../node_modules/nuxt/lib/builder/webpack/base.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const { cloneDeep } = require('lodash')
const { join, resolve } = require('path')
const { isUrl, urlJoin } = require('../../common/utils')
const vueLoader = require('./vue-loader')
const styleLoader = require('./style-loader')
const TimeFixPlugin = require('./plugins/timefix')
const WarnFixPlugin = require('./plugins/warnfix')

/*
|--------------------------------------------------------------------------
| Webpack Shared Config
|
| This is the config which is extended by the server and client
| webpack config files
|--------------------------------------------------------------------------
*/
module.exports = function webpackBaseConfig({ name, isServer }) {
  const config = {
    name,
    entry: {
      app: null
    },
    output: {
      path: resolve(this.options.buildDir, 'dist'),
      filename: this.getFileName('app'),
      chunkFilename: this.getFileName('chunk'),
      publicPath: (isUrl(this.options.build.publicPath)
        ? this.options.build.publicPath
        : urlJoin(this.options.router.base, this.options.build.publicPath))
    },
    performance: {
      maxEntrypointSize: 1000000,
      maxAssetSize: 300000,
      hints: this.options.dev ? false : 'warning'
    },
    resolve: {
      extensions: ['.js', '.json', '.vue'],
      alias: {
        '~': join(this.options.srcDir),
        '~~': join(this.options.rootDir),
        '@': join(this.options.srcDir),
        '@@': join(this.options.rootDir),
        // Used by vue-loader so we can use in templates
        // with <img src="~/assets/nuxt.png"/>
        'assets': join(this.options.srcDir, 'assets'),
        'static': join(this.options.srcDir, 'static')
      },
      modules: this.options.modulesDir
    },
    resolveLoader: {
      modules: this.options.modulesDir
    },
    module: {
      noParse: /es6-promise\.js$/, // Avoid webpack shimming process
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: vueLoader.call(this, { isServer })
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          options: this.getBabelOptions({ isServer })
        },
        { test: /\.css$/, use: styleLoader.call(this, 'css') },
        { test: /\.less$/, use: styleLoader.call(this, 'less', 'less-loader') },
        { test: /\.sass$/, use: styleLoader.call(this, 'sass', {loader: 'sass-loader', options: { indentedSyntax: true }}) },
        { test: /\.scss$/, use: styleLoader.call(this, 'scss', 'sass-loader') },
        { test: /\.styl(us)?$/, use: styleLoader.call(this, 'stylus', 'stylus-loader') },
        {
          test: /\.(png|jpe?g|gif|svg)$/,
          loader: 'url-loader',
          options: {
            limit: 1000, // 1KO
            name: 'img/[name].[hash:7].[ext]'
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 1000, // 1 KO
            name: 'fonts/[name].[hash:7].[ext]'
          }
        },
        {
          test: /\.(webm|mp4)$/,
          loader: 'file-loader',
          options: {
            name: 'videos/[name].[hash:7].[ext]'
          }
        }
      ]
    },
    plugins: this.options.build.plugins
  }

  // Add timefix-plugin before others plugins
  if (this.options.dev) {
    config.plugins.unshift(new TimeFixPlugin())
  }

  // Hide warnings about plugins without a default export (#1179)
  config.plugins.push(new WarnFixPlugin())

  // CSS extraction
  const extractCSS = this.options.build.extractCSS
  if (extractCSS) {
    const extractOptions = Object.assign(
      { filename: this.getFileName('css') },
      typeof extractCSS === 'object' ? extractCSS : {}
    )
    config.plugins.push(new ExtractTextPlugin(extractOptions))
  }

  // Clone deep avoid leaking config between Client and Server
  return cloneDeep(config)
}

// ../node_modules/nuxt/lib/builder/webpack/client.config.js
const { each } = require('lodash')
const webpack = require('webpack')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const HTMLPlugin = require('html-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const ProgressPlugin = require('webpack/lib/ProgressPlugin')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const { resolve } = require('path')
const { existsSync } = require('fs')
const Debug = require('debug')
const Chalk = require('chalk')
const base = require('./base.config.js')

const debug = Debug('nuxt:build')
debug.color = 2 // Force green color

/*
|--------------------------------------------------------------------------
| Webpack Client Config
|
| Generate public/dist/client-vendor-bundle.js
| Generate public/dist/client-bundle.js
|
| In production, will generate public/dist/style.css
|--------------------------------------------------------------------------
*/
module.exports = function webpackClientConfig() {
  let config = base.call(this, { name: 'client', isServer: false })

  // Entry points
  config.entry.app = resolve(this.options.buildDir, 'client.js')
  config.entry.vendor = this.vendor()

  // Config devtool
  config.devtool = this.options.dev ? 'cheap-source-map' : false
  config.output.devtoolModuleFilenameTemplate = '[absolute-resource-path]'

  // Add CommonChunks plugin
  commonChunksPlugin.call(this, config)

  // Env object defined in nuxt.config.js
  let env = {}
  each(this.options.env, (value, key) => {
    env['process.env.' + key] = (['boolean', 'number'].indexOf(typeof value) !== -1 ? value : JSON.stringify(value))
  })

  // Generate output HTML for SPA
  config.plugins.push(
    new HTMLPlugin({
      filename: 'index.spa.html',
      template: this.options.appTemplatePath,
      inject: true,
      chunksSortMode: 'dependency'
    })
  )

  // Generate output HTML for SSR
  if (this.options.build.ssr) {
    config.plugins.push(
      new HTMLPlugin({
        filename: 'index.ssr.html',
        template: this.options.appTemplatePath,
        inject: false // Resources will be injected using bundleRenderer
      })
    )
  }

  // Generate vue-ssr-client-manifest
  config.plugins.push(
    new VueSSRClientPlugin({
      filename: 'vue-ssr-client-manifest.json'
    })
  )

  // Extract webpack runtime & manifest
  config.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity,
      filename: this.getFileName('manifest')
    })
  )

  // Define Env
  config.plugins.push(
    new webpack.DefinePlugin(Object.assign(env, {
      'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV || (this.options.dev ? 'development' : 'production')),
      'process.env.VUE_ENV': JSON.stringify('client'),
      'process.mode': JSON.stringify(this.options.mode),
      'process.browser': true,
      'process.client': true,
      'process.server': false,
      'process.static': this.isStatic
    }))
  )

  // Build progress bar
  if (this.options.build.profile) {
    config.plugins.push(new ProgressPlugin({
      profile: true
    }))
  } else {
    config.plugins.push(new ProgressBarPlugin({
      complete: Chalk.green('█'),
      incomplete: Chalk.white('█'),
      format: '  :bar ' + Chalk.green.bold(':percent') + ' :msg',
      clear: false
    }))
  }

  const shouldClearConsole = this.options.build.stats !== false &&
                             this.options.build.stats !== 'errors-only'

  // Add friendly error plugin
  config.plugins.push(new FriendlyErrorsWebpackPlugin({ clearConsole: shouldClearConsole }))

  // --------------------------------------
  // Dev specific config
  // --------------------------------------
  if (this.options.dev) {
    // https://webpack.js.org/plugins/named-modules-plugin
    config.plugins.push(new webpack.NamedModulesPlugin())

    // Add HMR support
    config.entry.app = [
      // https://github.com/glenjamin/webpack-hot-middleware#config
      `webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=${this.options.router.base}/__webpack_hmr`.replace(/\/\//g, '/'),
      config.entry.app
    ]
    config.plugins.push(
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    )

    // DllReferencePlugin
    if (this.options.build.dll) {
      dllPlugin.call(this, config)
    }
  }

  // --------------------------------------
  // Production specific config
  // --------------------------------------
  if (!this.options.dev) {
    // Scope Hoisting
    if (this.options.build.scopeHoisting === true) {
      config.plugins.push(new webpack.optimize.ModuleConcatenationPlugin())
    }

    // https://webpack.js.org/plugins/hashed-module-ids-plugin
    config.plugins.push(new webpack.HashedModuleIdsPlugin())

    // Minify JS
    // https://github.com/webpack-contrib/uglifyjs-webpack-plugin
    if (this.options.build.uglify !== false) {
      config.plugins.push(
        new UglifyJSPlugin(Object.assign({
          // cache: true,
          sourceMap: true,
          parallel: true,
          extractComments: {
            filename: 'LICENSES'
          },
          uglifyOptions: {
            output: {
              comments: /^\**!|@preserve|@license|@cc_on/
            }
          }
        }, this.options.build.uglify))
      )
    }

    // Webpack Bundle Analyzer
    if (this.options.build.analyze) {
      config.plugins.push(new BundleAnalyzerPlugin(Object.assign({}, this.options.build.analyze)))
    }
  }

  // Extend config
  if (typeof this.options.build.extend === 'function') {
    const isDev = this.options.dev
    const extendedConfig = this.options.build.extend.call(this, config, {
      get dev() {
        console.warn('dev has been deprecated in build.extend(), please use isDev') // eslint-disable-line no-console
        return isDev
      },
      isDev,
      isClient: true
    })
    // Only overwrite config when something is returned for backwards compatibility
    if (extendedConfig !== undefined) {
      config = extendedConfig
    }
  }

  return config
}

// --------------------------------------------------------------------------
// Adds Common Chunks Plugin
// --------------------------------------------------------------------------
function commonChunksPlugin(config) {
  // Create explicit vendor chunk
  config.plugins.unshift(
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: this.getFileName('vendor'),
      minChunks(module, count) {
        // A module is extracted into the vendor chunk when...
        return (
          // If it's inside node_modules
          /node_modules/.test(module.context) &&
          // Do not externalize if the request is a CSS file or a Vue file which can potentially emit CSS assets!
          !/\.(css|less|scss|sass|styl|stylus|vue)$/.test(module.request)
        )
      }
    })
  )
}

// --------------------------------------------------------------------------
// Adds DLL plugin
// https://github.com/webpack/webpack/tree/master/examples/dll-user
// --------------------------------------------------------------------------
function dllPlugin(config) {
  const _dlls = []
  const vendorEntries = this.vendorEntries()
  const dllDir = resolve(this.options.cacheDir, config.name + '-dll')
  Object.keys(vendorEntries).forEach(v => {
    const dllManifestFile = resolve(dllDir, v + '-manifest.json')
    if (existsSync(dllManifestFile)) {
      _dlls.push(v)
      config.plugins.push(
        new webpack.DllReferencePlugin({
          // context: this.options.rootDir,
          manifest: dllManifestFile // Using full path to allow finding .js dll file
        })
      )
    }
  })
  if (_dlls.length) {
    debug('Using dll for ' + _dlls.join(','))
  }
}

amirrustam commented 6 years ago

With in the context of cypress-vue-unit-test the minimum stuff you have to make sure are correct in your webpack config are your loaders (i.e. vue-loader) and custom aliases:

// base.config.js
// ...
resolve: {
      extensions: ['.js', '.json', '.vue'],
      alias: {
        '~': join(this.options.srcDir),
        '~~': join(this.options.rootDir),
        '@': join(this.options.srcDir),
        '@@': join(this.options.rootDir),
        // Used by vue-loader so we can use in templates
        // with <img src="~/assets/nuxt.png"/>
        'assets': join(this.options.srcDir, 'assets'),
        'static': join(this.options.srcDir, 'static')
      },
      modules: this.options.modulesDir
    },
// ...
module: {
      noParse: /es6-promise\.js$/, // Avoid webpack shimming process
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: vueLoader.call(this, { isServer })
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
          options: this.getBabelOptions({ isServer })
        },
        { test: /\.css$/, use: styleLoader.call(this, 'css') },
        { test: /\.less$/, use: styleLoader.call(this, 'less', 'less-loader') },
        { test: /\.sass$/, use: styleLoader.call(this, 'sass', {loader: 'sass-loader', options: { indentedSyntax: true }}) },
        { test: /\.scss$/, use: styleLoader.call(this, 'scss', 'sass-loader') },
        { test: /\.styl(us)?$/, use: styleLoader.call(this, 'stylus', 'stylus-loader') },
        {
          test: /\.(png|jpe?g|gif|svg)$/,
          loader: 'url-loader',
          options: {
            limit: 1000, // 1KO
            name: 'img/[name].[hash:7].[ext]'
          }
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 1000, // 1 KO
            name: 'fonts/[name].[hash:7].[ext]'
          }
        },
        {
          test: /\.(webm|mp4)$/,
          loader: 'file-loader',
          options: {
            name: 'videos/[name].[hash:7].[ext]'
          }
        }
      ]
    },
 // ...

Your base.config.js should be sufficient.

I'm going to close this, since this is not cypress-vue-unit-test bug or feature request. If you get any errors feel free to reach out. It would help if you could elaborate your issue with more detail. Thanks.

NickBolles commented 4 years ago

@amirrustam @kabootit I've just published a package that should make this much easier. See the documentation on cypress-nuxt, try it out and let me know how it goes. Then we can add something to the documentation of cypress-vue-unit-test maybe

cypress-io / cypress-vue-unit-test

Nuxt bundling #20