WebpackConfig

import ImageminPlugin from 'imagemin-webpack-plugin';
import imageminMozjpeg from 'imagemin-mozjpeg'
import config from './config';
import SvgStorePlugin from 'external-svg-sprite-loader/lib/SvgStorePlugin';

const webpack = require('webpack');
const path = require('path');

// Plugins
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const ResourceHintWebpackPlugin = require('resource-hints-webpack-plugin');

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

// Env
const isProd = process.argv.indexOf('-p') !== -1;

console.log('\x1b[33m%s\x1b[0m', 'Production: ' + isProd);

module.exports = {
	entry: `${config.src}/index.js`,
	target: 'web',
	output: {
		path: isProd ? path.resolve(path.join(__dirname, '/../static/')) : path.resolve(path.join(__dirname, '/../dist/static/')),
		filename: 'app.bundle.js',
		publicPath: isProd ? config.publicPathProd : config.publicPathDev
	},
	node: {
		fs: 'empty'
	},
	module: {
		rules: [
			{
				enforce: 'pre',
				test: /\.jsx?$/,
				exclude: /node_modules/,
				loader: 'eslint-loader',
				options: {
					formatter: require('eslint-friendly-formatter'),
					emitError: false,
					emitWarning: true,
					failOnWarning: false,
					failOnError: false
				}
			},
			{
				test: /responsive\/.*.(jpe?g|png)$/i,
				use: [
					{
						loader: 'responsive-loader',
						options: {
							// adapter: require('responsive-loader/sharp'),
							sizes: [320, 768, 992, 1200, 1920],
							placeholder: true,
							outputPath: isProd ? '' : 'images/',
							name: isProd ? '/images/[name]/[name]-[width].[ext]' : 'static/images/[name]/[name]-[width].[ext]'
						}
					}
				]
			},
			{
				test: /normal\/.*.(jpe?g|png|gif|svg)$/i,
				exclude: [/src\/static\/images\/svg-sprites/, /src\/static\/images\/sprites/],
				use: [
					{
						loader: 'file-loader',
						options: {
							outputPath: 'images/',
							name: '[name].[ext]'
						}
					}
				]
			},
			{
				test: /\.(jpe?g|png)$/i,
				exclude: [/src\/static\/images\/sprites/],
				use: [
					{
						loader: 'file-loader',
						options: {
							outputPath: 'images/',
							name: '[name].webp'
						}
					},
					'webp-loader?{preset: "photo",quality: 85}'
				]
			},
			{
				test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
				exclude: [/src\/static\/images/, /src\/static\/fonts/],
				use: [
					{
						loader: 'file-loader',
						options: {
							outputPath: '/fonts/'
						}
					}
				]
			},
			{
				test: /static\/images\/svg-sprites\/.*\.svg$/,
				use: [
					{
						loader: 'svg-sprite-loader',
						options: {
							spriteFilename: 'images/sprites.svg'
						}
					},
					{
						loader: 'svgo-loader'
					}
				]
			}
		]
	},
	resolve: {
		modules: ['node_modules', '../src/static/images/static-images/']
	},
	plugins: [
		new webpack.ProvidePlugin({
			$: 'jquery',
			jQuery: 'jquery',
			'window.jQuery': 'jquery',
			Popper: ['popper.js', 'default']
		}),
		new SpritesmithPlugin({
			src: {
				cwd: path.resolve(__dirname, '../src/static/images/sprites'),
				glob: '*.png'
			},
			target: {
				image: isProd ? path.resolve(__dirname, '../static/images/sprites.png') : path.resolve(__dirname, '../dist/static/images/sprites.png'),
				css: path.resolve(__dirname, '../src/static/global-styles/_sprites.scss')
			},
			apiOptions: {
				cssImageRef: isProd ? config.publicPathProd + 'images/sprites.png' : '/static/images/sprites.png'
			}
		}),
		new SpriteLoaderPlugin(),
		new HtmlWebpackPlugin({
			title: config.title,
			path: isProd ? config.publicPathProd : config.publicPathDev,
			filename: isProd ? '../dist/index.html' : 'index.html',
			inject: false,
			hash: true,
			minify: config.HTMLminify,
			cache: true,
			showErrors: true,
			preload: '**/*.*',
			prefetch: '**/*.*',
			template: `${config.src}/index.html`,
			isProd: isProd
		}),
		new ScriptExtHtmlWebpackPlugin({
			async: /\.js$/,
			preload: {
				test: /\.js$/,
				chunks: 'async'
			}
		}),
		new SWPrecacheWebpackPlugin({
			cacheId: config.title.replace(/\s/g, ''),
			filename: 'service-worker.js',
			filepath: 'dist/service-worker.js',
			minify: true,
			mergeStaticsConfig: true,
			stripPrefix: path.join(__dirname, '../', '/dist'),
			staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/]
		}),
		new StyleLintPlugin({
			configFile: config.SCSSLintConfigFile,
			failOnError: false
		}),
		new ImageminPlugin({
			disable: false,
			pngquant: {
				quality: '85'
			},
			plugins: [
				imageminMozjpeg({
					quality: 85,
					progressive: true
				})
				// imageminWebp({
				// 	quality: 85,
				// 	preset: "photo"
				// })
			]
		}),
		new webpack.DefinePlugin({
			'process.env.NODE_ENV': JSON.stringify(isProd ? 'production' : 'development')
		}),
		new ResourceHintWebpackPlugin()
	]
};