wand-front-utils/webpack.config.js

const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const CopyPlugin = require('copy-webpack-plugin')
const { InjectManifest } = require('workbox-webpack-plugin')
const ImageminPlugin = require('imagemin-webpack-plugin').default
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const { JSDOM } = require('jsdom')
const tempy = require('tempy')
const fs = require('fs')

const magicFile = (text) => {
  const p = tempy.file()
  fs.writeFileSync(p, text)
  return p
}

// const magicAppend = (orig, text, sep = '\n') => magicFile(fs.readFileSync(orig) + sep + text)

const jsMin = {
  mangle: true,
  compress: {
    keep_fargs: false,
    pure_getters: true,
    pure_funcs: ['F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'A9'],
    unsafe: true,
    ecma: 6,
    unsafe_comps: true,
    unsafe_arrows: true,
  }
}

const htmlMin = {
  minifyCSS: {
    compatibility: 'ie9',
    level: 2
  },
  minifyJS: jsMin,

  collapseBooleanAttributes: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,

  removeComments: true,
  sortAttributes: true,
  sortClassName: true,
}

prerenderOpts = (width, height, name) => ({
  outputDir: path.join(__dirname, 'dist', 'prerender', name),
  staticDir: path.join(__dirname, 'dist'),
  routes: ROUTES,
  minify: htmlMin,
  renderer: new Renderer({
    renderAfterTime: 300,
    viewport: {
      width: width,
      height: height,
      deviceScaleFactor: 1,
    }
  }),
  postProcess(renderedRoute) {
    const dom = new JSDOM(renderedRoute.html, { runScripts: 'outside-only' })
    dom.window.eval(`
        const wandTarget = document.createElement('script')
        wandTarget.src = '/wand.js'
        document.body.appendChild(wandTarget)
      `)
    return {
      ...renderedRoute,
      html: dom.serialize(),
    }
  }
})

const productionPlugins = [
  new PrerenderSPAPlugin(prerenderOpts(1920, 1080, 'desktop')),
  new PrerenderSPAPlugin(prerenderOpts(375, 667, 'phone')),
  new PrerenderSPAPlugin(prerenderOpts(768, 1024, 'tablet')),
  new InjectManifest({
    importWorkboxFrom: 'local',
    swSrc: magicFile(`
          workbox.core.skipWaiting();
          workbox.core.clientsClaim();
          workbox.precaching.cleanupOutdatedCaches()
          workbox.routing.registerNavigationRoute('/index.html');
          workbox.precaching.precacheAndRoute(self.__precacheManifest);
        `),
    swDest: 'sw.js',
  }),
  new ImageminPlugin({
    jpegtran: { progressive: true },
    svgo: null,
  }),
  new FaviconsWebpackPlugin({
    logo: path.join(__dirname, 'data', 'images', 'icon.png'),
    inject: false, // manually in our template for now cos its fuckd
    mode: 'webapp',
    prefix: 'appdata',
    favicons: {
      appName: PRETTY_NAME,
      appDescription: DESCRIPTION,
      background: BACKGROUND_COLOR,
      theme_color: THEME_COLOR,
    }
  }),
];

let plugins = (env, argv) => [
  new CopyPlugin([{ from: 'data', to: 'data' }, { from: 'wand.js', to: 'wand.js' }]),
  new HtmlWebpackPlugin({
    hash: true,
    inject: true,
    minify: argv.mode == 'production' ? htmlMin : false,
    template: './template.html',
    meta: {
      viewport: 'width=360, initial-scale=1, maximum-scale=1'
    }
  }),
];

module.exports = (env, argv) => ({
  target: 'web',
  externals: {
    svgo: 'svgo'
  },
  entry: magicFile(`
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js'));
    }

    require('${process.env.PWD}/src/index.js')
  `),
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: [
          { loader: 'elm-hot-webpack-loader' },
          {
            loader: 'elm-webpack-loader',
            options: {
              optimize: argv.mode == 'production'
            },
          },
        ],
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        options: {
          minimize: true,
          ...htmlMin
        },
      },
      {
        test: /\.css$/i,
        use: ['style-loader'],
      },
    ],
  },
  optimization: {
    minimize: argv.mode == 'production',
    minimizer: [
      new TerserPlugin({ terserOptions: jsMin }),
      new TerserPlugin({ terserOptions: jsMin }),
    ],
  },
  plugins: [...plugins(env, argv), ...(argv.mode == 'production' ? productionPlugins : [])],
})