const webpack = require('webpack'); const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const ErrorOverlayPlugin = require('error-overlay-webpack-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); module.exports = (env, argv) => { const dev = argv.mode !== 'production'; const config = { devtool: dev ? 'source-map' : false, mode: dev ? 'development' : 'production', entry: { 'Juick': [ 'core-js/modules/es.array.map', 'core-js/modules/es.map', 'core-js/modules/es.object.create', 'core-js/modules/es.object.define-property', 'core-js/modules/es.object.set-prototype-of', 'core-js/modules/es.promise', 'core-js/modules/es.set', 'core-js/modules/es.symbol', 'core-js/modules/web.dom-collections.iterator', 'url-polyfill', __dirname + '/src/index.js', require.resolve('evil-icons/assets/evil-icons.css') ] }, output: { filename: dev ? '[name].js' : '[name].[contenthash].bundle.js', chunkFilename: dev ? '[name].js' : '[name].[contenthash].bundle.js', publicPath: '/', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: [ dev ? 'style-loader' : MiniCssExtractPlugin.loader, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ 'stylelint', 'postcss-preset-env' ] } } } ] }, { test: /\.html$/, use: [ { loader: 'html-loader', options: { minimize: false } } ] }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'file-loader', options: { hash: 'sha512', digest: 'hex', name: '[contenthash].[ext]' } } ] }, plugins: [ new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), new MiniCssExtractPlugin({ filename: 'Juick.[contenthash].css' }), new HtmlWebPackPlugin({ template: './src/index.html', filename: './index.html' }), new ESLintPlugin({ files: 'src', lintDirtyModulesOnly: true, failOnWarning: false, failOnError: true, fix: false }) ], devServer: { bonjour: true, historyApiFallback: true, host: '0.0.0.0', hot: true, inline: true, overlay: true } }; if (dev) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); } else { config.optimization = { minimizer: [ '...', new CssMinimizerPlugin({ sourceMap: true }) ], splitChunks: { chunks: 'all' } }; } return config; };