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].[chunkhash].bundle.js', chunkFilename: process.env.WEBPACK_SERVE ? '[name].js' : '[name].[chunkhash].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: true } } ] }, { 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))); } };