siesta-lite/examples/vue-vuestic-admin-dashboard/vue.config.js

Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers

const path = require('path')

const CopyWebpackPlugin = require('copy-webpack-plugin')
const WebpackWatchedGlobEntries = require('webpack-watched-glob-entries-plugin')

module.exports = {
  baseUrl: './',
  lintOnSave: false,
  pages: {
    index: {
      // entry for the page
      entry: 'src/main.js',
      // the source template
      template: 'public/index.html',
      // output as dist/index.html
      filename: 'index.html',
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Vuestic Admin',
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
    },
    siesta: {
      entry: 'tests/entry.js',
      template: 'tests/entry.html',
      filename: 'entry.html',
      inject: false,
      chunks: ['chunk-vendors', 'chunk-common'],
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'src': path.resolve('src'),
        'assets': path.resolve('src/assets'),
        'components': path.resolve('src/components'),
        'services': path.resolve('src/services'),
        'directives': path.resolve('src/directives'),
        'vuestic-mixins': path.resolve('src/vuestic-theme/vuestic-mixins'),
        'vuestic-components': path.resolve('src/vuestic-theme/vuestic-components'),
        'vuestic-directives': path.resolve('src/vuestic-theme/vuestic-directives'),
        'vuestic-theme': path.resolve('src/vuestic-theme'),
        'data': path.resolve('src/data'),
        'vuex-store': path.resolve('src/store')
      }
    },
    plugins: [
      // copy Siesta files and web interface resources
      new CopyWebpackPlugin([
        {
          from: path.resolve(__dirname, 'node_modules/siesta-lite/resources'),
          to: 'static/siesta-lite/resources',
        },
        {
          from: path.resolve(__dirname, 'node_modules/siesta-lite/siesta-all.js'),
          to: 'static/siesta-lite/siesta-all.js',
        },
        {
          from: path.resolve(__dirname, 'tests/siesta.html'),
          to: 'tests/siesta.html',
        },
        {
          from: path.resolve(__dirname, 'tests/siesta.js'),
          to: 'tests/siesta.js',
        },
      ]),
    ],
  },
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        data: `@import "@/sass/shared.scss";`,
      },
    },
  },

  pluginOptions: {
    configureMultiCompilerWebpack: webpackConfig => {
      // `webpackConfig` here is the one resolved by vue cli.
      // (**after** executing `configureWebpack` and `chainWebpack`)
      const cloneDeep = require('lodash.clonedeep')
      const transpileTestsConfig = cloneDeep(webpackConfig)

      transpileTestsConfig.entry = WebpackWatchedGlobEntries.getEntries(
        [
          path.resolve(__dirname, 'tests/**/*.t.js'),
        ]
      )

      transpileTestsConfig.output.filename = 'tests/[name].js'

      // const HtmlWebpackPlugin = require('html-webpack-plugin')
      // const PreloadPlugin = require('@vue/preload-webpack-plugin')

      // console.log("PRELOAD", transpileTestsConfig.plugins.filter(plugin => (plugin instanceof PreloadPlugin)).length)

      // transpileTestsConfig.plugins = transpileTestsConfig.plugins.filter(plugin => !(plugin instanceof HtmlWebpackPlugin) && !(plugin instanceof PreloadPlugin))

      transpileTestsConfig.plugins.push(
        new WebpackWatchedGlobEntries()
      )

      // return an array to invoke webpack multi-compiler mode
      return [webpackConfig, transpileTestsConfig]
    }
  }
}