const webpack = require('webpack'); const path = require('path'); const HtmlWebPackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const ErrorOverlayPlugin = require('error-overlay-webpack-plugin'); const history = require('connect-history-api-fallback'); const convert = require('koa-connect'); const internalIp = require('internal-ip'); module.exports = { devtool: process.env.WEBPACK_SERVE ? 'source-map' : false, mode: process.env.WEBPACK_SERVE ? 'development' : 'production', entry: { 'Juick': [ __dirname + '/src/index.js', __dirname + '/src/style/main.css' ] }, output: { filename: process.env.WEBPACK_SERVE ? '[name].js' : '[name].[contenthash].bundle.js', chunkFilename: process.env.WEBPACK_SERVE ? '[name].js' : '[name].[contenthash].bundle.js', publicPath: '/', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { plugins: () => [ require('autoprefixer')({ browsers: 'last 4 versions, > 1%, ie >= 8' }) ] } } ] }, { test: /\.html$/, use: [ { loader: 'html-loader', options: { minimize: false } } ] }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [ 'file-loader?hash=sha512&digest=hex&name=[hash].[ext]' ] } ] }, optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: Boolean(process.env.WEBPACK_SERVE) }), new OptimizeCSSAssetsPlugin({}) ], splitChunks: { cacheGroups: { vendor: { test: /node_modules/, chunks: 'initial', name: 'vendor', enforce: true }, } } }, plugins: [ new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), new MiniCssExtractPlugin({ filename: 'Juick.[contenthash].css', allChunks: true }), new HtmlWebPackPlugin({ template: './src/views/index.html', filename: './index.html' }), new ErrorOverlayPlugin() ], }; module.exports.serve = { content: [__dirname], host: internalIp.v4.sync(), add: (app, middleware, options) => { const historyOptions = { // ... see: https://github.com/bripkens/connect-history-api-fallback#options }; app.use(convert(history(historyOptions))); } };