ERROR in Error: Chunk.parents: Use ChunkGroup.getParents() instead about preload-webpack-plugin HOT 10 CLOSED

/**
 * Webpack Config for Javascript Bundling
 *
 * @package  generator-kittn
 * @author   Lars Eichler <[email protected]>
 */

import webpack from 'webpack'
import { getIfUtils, removeEmpty } from 'webpack-config-utils'
import path from 'path'
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import StylelintPlugin from 'stylelint-webpack-plugin'
import CleanWebpackPlugin from 'clean-webpack-plugin'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import SWPrecacheWebpackPlugin from 'sw-precache-webpack-plugin'
import PreloadWebpackPlugin from 'preload-webpack-plugin'
import OptimizeCSSPlugin from 'optimize-css-assets-webpack-plugin'
const loadMinified = require('./load-minified')
const kittnConf = require('../config.json')

const nodeEnv = process.env.NODE_ENV || 'production'

const {
  ifProduction,
  ifDevelopment
} = getIfUtils(nodeEnv)

/*
 |--------------------------------------------------------------------------
 | Setting some paths for our Application
 |--------------------------------------------------------------------------
 */
const ROOT_PATH = path.resolve(__dirname, '..')
const PUBLIC_PATH = path.join(ROOT_PATH, kittnConf.dist.webpackpublic)
const ASSETS_PATH = kittnConf.dist.webpackjsassets
const CSS_PATH = kittnConf.dist.webpackcssassets
const CSS_ROOT = path.resolve(ROOT_PATH, kittnConf.src.style)
const LOADER_PATH = path.join(ROOT_PATH, kittnConf.src.js)

/*
 |--------------------------------------------------------------------------
 | Hot Middleware Client
 |--------------------------------------------------------------------------
 */

const hotClient =
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true&overlay=true'

/*
 |--------------------------------------------------------------------------
 | Defining Entry Points, could be used to manually split Parts of the Application, for example
 | Admin Javascript and FrontEnd JavaScript
 |--------------------------------------------------------------------------
 */

const entryPoints = kittnConf.src.jsEntryPoints

if (ifDevelopment()) {
  Object.keys(entryPoints).forEach((entry) => entryPoints[entry] = [hotClient].concat(entryPoints[entry]))
}

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

function assetsPath(_path) {
  return path.posix.join('assets/counselor/', _path);
}

const CSS_LOADERS = [
  {
    loader: 'css-loader',
    options: {
      autoprefixer: false,
      sourceMap: true,
      url: true
    }
  },
  {
    loader: 'postcss-loader',
    options: {
      sourceMap: true,
      config: {
        ctx: {
          normalize: true
        }
      }
    }
  },
  {
    loader: 'sass-loader',
    options: {
      sourceMap: true
    }
  }
]


/*
 |--------------------------------------------------------------------------
 | return webpack config object
 |--------------------------------------------------------------------------
 */
module.exports = {
  mode: nodeEnv,
  context: path.join(ROOT_PATH, 'src'),
  entry: removeEmpty(entryPoints),
  output: {
    path: path.join(PUBLIC_PATH, ASSETS_PATH),
    publicPath: ifDevelopment('/' + ASSETS_PATH, ASSETS_PATH),
    filename: 'js/[name].js',
    chunkFilename: 'js/[id].[chunkhash].js'
  },
  externals: {
    Modernizr: 'Modernizr'
  },
  resolve: {
    extensions: [
      '.vue',
      '.js'
    ],
    modules: [resolve(kittnConf.src.base), resolve('node_modules')],
    alias: {
      appstyles$: path.resolve(CSS_ROOT, '_app.scss'),
      components: path.resolve(LOADER_PATH, 'components/'),
      atoms: path.resolve(LOADER_PATH, 'components/atoms/'),
      molecules: path.resolve(LOADER_PATH, 'components/molecules/'),
      organisms: path.resolve(LOADER_PATH, 'components/organisms/'),
      templates: path.resolve(LOADER_PATH, 'components/templates/'),
      assets: path.resolve(LOADER_PATH, 'assets/'),
      api: path.resolve(LOADER_PATH, 'shared/api/'),
      mixins: path.resolve(LOADER_PATH, 'shared/mixins/'),
      store: path.resolve(LOADER_PATH, 'store'),
      'package.json': resolve('/package.json'),
      'vue-quill-editor': 'vue-quill-editor/src/editor.vue'
    }
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        options: {
          configFile: ifProduction('./.eslintrc.js', './.eslintrc-dev.js'),
          formatter: require('eslint-friendly-formatter')
        },
        exclude: /node_modules/,
        include: resolve(kittnConf.src.base)
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        include: resolve(kittnConf.src.base),
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: ifProduction(
              ExtractTextPlugin.extract({
                use: [...CSS_LOADERS],
                fallback: 'vue-style-loader',
              }),
              [{ loader: 'vue-style-loader'}, ...CSS_LOADERS]
            ),
          }
        }
      },
      {
        test: /\.(eot|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader',
        query: ifProduction({
          outputPath: 'fonts/',
          publicPath: kittnConf.dist.webpackFontsPath,
          name: '[name].[ext]'
        }, {
          outputPath: 'fonts/',
          publicPath: kittnConf.dist.webpackFontsPathDev,
          name: '[name].[ext]'
        })
      },
      {
        test: /\.(png|jpe?g|gif)(\?\S*)?$/,
        loader: 'url-loader',
        options: {
          fallback: 'file-loader'
        }
      },
      {
        test: /\.scss$/,
        include: resolve(kittnConf.src.style),
        exclude: [resolve('node_modules'), resolve('public/')],
        use: ifProduction(ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: CSS_LOADERS,
        }), ['style-loader', ...CSS_LOADERS]),
      },
      {
        test: /\.css$/,
        use: ifProduction(ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader'],
        }), ['style-loader', 'css-loader'])
      },
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader',
        options: {
          // optional [svgo](https://github.com/svg/svgo) options
          svgo: {
            plugins: [
              { removeDoctype: true },
              { removeComments: true }
            ]
          }
        }
      }
    ]
  },
  plugins: removeEmpty([
    ifProduction(
      new CleanWebpackPlugin([
        ASSETS_PATH + 'js/',
        CSS_PATH
      ],
      {
        root: PUBLIC_PATH,
        beforeEmit: true,
        exclude: ['modernizr.js', 'style.css', 'style.css.map']
      })
    ),
    ifProduction(
      new BundleAnalyzerPlugin({
        analyzerMode: 'disabled',
        generateStatsFile: true,
        statsFilename: `${ROOT_PATH}/webpack/stats.json`,
        logLevel: 'info'
      })
    ),
    ifDevelopment(new webpack.HotModuleReplacementPlugin()),
    ifDevelopment(new webpack.NamedModulesPlugin()),
    ifDevelopment(new webpack.NoEmitOnErrorsPlugin()),
    ifDevelopment(new FriendlyErrorsWebpackPlugin()),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(nodeEnv)
      }
    }),
    ifProduction(
      new StylelintPlugin({
        context: LOADER_PATH,
        syntax: 'scss'
      })
    ),
    new ExtractTextPlugin({
      filename: ifDevelopment('css/[name].css', 'css/[name].[chunkhash].css'),
      allChunks: true
    }),

    ifProduction(
      new OptimizeCSSPlugin({
        cssProcessorOptions: {
          safe: true
        }
      })
    ),

    ifProduction(
      new HtmlWebpackPlugin({
        template: '../public/index.html',
        filename: '../../index.html',
        inject: true,
        hash: true,
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: false
          // more options:
          // https://github.com/kangax/html-minifier#options-quick-reference
        },
        // necessary to consistently work with multiple chunks via CommonsChunkPlugin
        serviceWorkerLoader: `<script>${loadMinified(path.join(__dirname, './service-worker-prod.js'))}</script>`
      })
    ),
    ifProduction(
      new PreloadWebpackPlugin()
    ),

    // service worker caching
    new SWPrecacheWebpackPlugin({
      cacheId: '{{ name }}',
      filename: 'js/service-worker.js',
      staticFileGlobs: ['../public/onlineberatung/**/*.{js,html,css}'],
      minify: true
      // stripPrefix: 'dist/'
    })
  ])
}