Replace Mailchimp's 140KB JS

webpack.config.js

@@ -0,0 +1,124 @@
+const path = require('path')
+const glob = require('glob')
+const webpack = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const PurgecssPlugin = require('purgecss-webpack-plugin')
+const HtmlWebPackPlugin = require('html-webpack-plugin')
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
+const OpenBrowserPlugin = require('opn-browser-webpack-plugin')
+
+module.exports = (env, argv) => {
+
+  const PATHS = {
+    src: path.join(__dirname, 'src')
+  }
+
+  const config = {
+    entry: {
+      main: './src/index.js'
+    },
+    output: {
+      path: path.join(__dirname, 'dist'),
+      publicPath: '/',
+      filename: '[name].js',
+      globalObject: 'this'
+    },
+    target: 'web',
+    devtool: 'source-map',
+    resolve: {
+      extensions: ['.js', '.jsx'],
+    },
+    performance: {
+      hints: false
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: [
+            MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader',
+          ]
+        },
+        {
+          enforce: 'pre',
+          test: /\.js$/,
+          use: ['source-map-loader'],
+        },
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader'
+        },
+        {
+          test: /\.html$/,
+          use: [
+            {
+              loader: 'html-loader',
+              options: {
+                interpolate: true,
+                minimize: false
+              }
+            }
+          ]
+        },
+        {
+          test: /\.(woff|woff2|eot|ttf|otf|png|svg|jpg|gif)$/,
+          use: ['file-loader']
+        }
+      ]
+    },
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: 'style.css',
+        chunkFilename: 'style.css',
+        ignoreOrder: false
+      }),
+      new PurgecssPlugin({
+        paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
+      }),
+      new HtmlWebPackPlugin({
+        template: './src/index.html',
+        filename: './index.html'
+      }),
+      new FaviconsWebpackPlugin('./src/img/icon.png'),
+      new webpack.NoEmitOnErrorsPlugin(),
+      new webpack.WatchIgnorePlugin(['./dist'])
+    ]
+  }
+
+  if (argv.mode == 'development') {
+    config.devtool = 'inline-source-map'
+
+    config.devServer = {
+      watchContentBase: true,
+      historyApiFallback: true,
+      hot: true,
+      inline: true,
+
+      host: '0.0.0.0',
+      port: 3000
+    }
+
+    config.plugins.push(new webpack.HotModuleReplacementPlugin())
+    config.plugins.push(new OpenBrowserPlugin({
+      url: 'http://localhost:3000'
+    }))
+  }
+
+  if (argv.mode == 'production') {
+    config.optimization = {
+      minimizer: [
+        new TerserPlugin({
+          cache: true,
+          parallel: true,
+          sourceMap: true
+        }),
+        new OptimizeCSSAssetsPlugin({})
+      ]
+    }
+  }
+
+  return config
+}