Webpack optimizations

Author: aganov

package-lock.json

@@ -4,9 +4,9 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "webpack --mode production --env production",
+    "build": "NODE_ENV=production webpack --mode=production",
     "clean": "rm -rf dist",
-    "start": "webpack-dev-server --open --mode development --env development"
+    "start": "NODE_ENV=development webpack-dev-server --open --mode=development"
   },
   "keywords": [],
   "author": "",
@@ -21,15 +21,20 @@
     "@babel/core": "^7.4.0",
     "@babel/preset-env": "^7.4.2",
     "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.4.0",
     "babel-loader": "^8.0.5",
+    "compression-webpack-plugin": "^2.0.0",
     "css-loader": "^2.1.1",
     "html-webpack-inline-source-plugin": "0.0.10",
     "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.11.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.6.0",
+    "postcss-safe-parser": "^4.0.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.29.6",

package.json

@@ -1,3 +1,7 @@
-module.exports = (env) => {
-  return require(`./webpack/${env}.js`)
-}
+// Imports: Dependencies
+const path = require("path")
+require("@babel/register")
+
+module.exports = (env, argv) => {
+  return require(`./webpack/${argv.mode}.js`)
+}

webpack.config.js

@@ -1,4 +1,8 @@
-const merge = require("webpack-merge")
-const environment = require("./environment.js")
+import merge from "webpack-merge"
+import environment from "./environment"
+import { developmentPlugins } from "./plugins"
 
-module.exports = merge(environment, {})
+module.exports = merge(environment, {
+  devtool: "source-map",
+  plugins: developmentPlugins
+})

webpack/development.js

@@ -1,16 +1,17 @@
-const HtmlWebPackPlugin = require("html-webpack-plugin")
-const WebpackModules = require("webpack-modules")
+import { environmentPlugins, optimizationPlugins } from "./plugins"
+import MiniCssExtractPlugin from "mini-css-extract-plugin"
+const devMode = process.env.NODE_ENV !== "production"
 
 module.exports = {
   module: {
     rules: [
       {
-        test: /\.(scss)$/,
+        test: /\.(sa|sc|c)ss$/,
         use: [
-          { loader: "style-loader" },
-          { loader: "css-loader" },
-          { loader: "postcss-loader" },
-          { loader: "sass-loader" }
+          { loader: devMode ? "style-loader" : MiniCssExtractPlugin.loader, options: { sourceMap: devMode } },
+          { loader: "css-loader", options: { sourceMap: devMode } },
+          { loader: "postcss-loader", options: { sourceMap: devMode } },
+          { loader: "sass-loader", options: { sourceMap: devMode } }
         ]
       },
       {
@@ -22,12 +23,6 @@ module.exports = {
       }
     ]
   },
-  plugins: [
-    new WebpackModules(),
-    new HtmlWebPackPlugin({
-      inlineSource: ".(js|css)$",
-      template: "./src/index.html",
-      filename: "./index.html"
-    })
-  ]
+  optimization: optimizationPlugins,
+  plugins: environmentPlugins
 }

webpack/environment.js

@@ -0,0 +1,15 @@
+/**
+ * Prepare compressed versions of assets to serve them with Content-Encoding
+ * Docs: https://github.com/webpack-contrib/compression-webpack-plugin
+ */
+
+const CompressionPlugin = require("compression-webpack-plugin")
+
+const config = {
+  filename: "[path].gz[query]",
+  algorithm: "gzip",
+  cache: true,
+  test: /\.(html)$/// /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+}
+
+export default () => new CompressionPlugin(config)

webpack/plugins/compression-plugin.js

@@ -0,0 +1,8 @@
+/**
+ * Embed javascript and css source inline when using the webpack dev server or middleware
+ * Docs: https://github.com/DustinJackson/html-webpack-inline-source-plugin
+ */
+
+const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin")
+
+export default () => new HtmlWebpackInlineSourcePlugin()

webpack/plugins/html-webpack-inline-source-plugin.js

@@ -0,0 +1,17 @@
+/**
+ * Plugin that simplifies creation of HTML files to serve your bundles
+ * Docs: https://github.com/jantimon/html-webpack-plugin
+ */
+
+import HtmlWebpackPlugin from "html-webpack-plugin"
+
+const devMode = process.env.NODE_ENV !== "production"
+
+const config = {
+  inlineSource: ".(js|css)$",
+  minify: true,
+  inject: true,
+  hash: devMode ? true : false
+}
+
+export default () => new HtmlWebpackPlugin(config)

webpack/plugins/html-webpack-plugin.js

@@ -0,0 +1,27 @@
+import compressionPlugin from "./compression-plugin"
+import htmlWebpackInlineSourcePlugin from "./html-webpack-inline-source-plugin"
+import htmlWebpackPlugin from "./html-webpack-plugin"
+import miniCssExtractPlugin from "./mini-css-extract-plugin"
+import optimizeCSSAssetsPlugin from "./optimize-css-assets-webpack-plugin"
+import terserPlugin from "./terser-plugin"
+import webpackModulesPlugin from "./webpack-modules-plugin"
+
+export const optimizationPlugins = {
+  minimizer: [
+    terserPlugin(),
+    optimizeCSSAssetsPlugin()
+  ]
+}
+
+export const environmentPlugins = [
+  miniCssExtractPlugin(),
+  webpackModulesPlugin(),
+  htmlWebpackPlugin()
+]
+
+export const devPlugins = []
+
+export const productionPlugins = [
+  htmlWebpackInlineSourcePlugin(),
+  compressionPlugin()
+]

webpack/plugins/index.js

@@ -0,0 +1,12 @@
+/**
+ * This plugin extracts CSS into separate files.
+ * It creates a CSS file per JS file which contains CSS.
+ * It supports On-Demand-Loading of CSS and SourceMaps.
+ *
+ * Docs: https://github.com/webpack-contrib/mini-css-extract-plugin
+ */
+
+import MiniCssExtractPlugin from "mini-css-extract-plugin"
+const devMode = process.env.NODE_ENV !== "production"
+
+export default () => new MiniCssExtractPlugin({})

webpack/plugins/mini-css-extract-plugin.js

@@ -0,0 +1,16 @@
+/**
+ * A Webpack plugin to optimize \ minimize CSS assets.
+ * Docs: https://github.com/NMFR/optimize-css-assets-webpack-plugin
+ */
+
+import OptimizeCSSAssetsPlugin from "optimize-css-assets-webpack-plugin"
+const safePostCssParser = require("postcss-safe-parser")
+
+export default () =>
+  new OptimizeCSSAssetsPlugin({
+    parser: safePostCssParser,
+    map: {
+      inline: false,
+      annotation: true
+    }
+  })

webpack/plugins/optimize-css-assets-webpack-plugin.js

@@ -0,0 +1,34 @@
+/**
+ * This plugin is used to minify your JavaScript.
+ * Docs: https://github.com/webpack-contrib/terser-webpack-plugin
+ */
+
+import TerserPlugin from "terser-webpack-plugin"
+
+const config = {
+  parallel: true,
+  cache: false,
+  sourceMap: false,
+  terserOptions: {
+    parse: {
+      // Let terser parse ecma 8 code but always output
+      // ES5 compliant code for older browsers
+      ecma: 8
+    },
+    compress: {
+      ecma: 5,
+      warnings: false,
+      comparisons: false
+    },
+    mangle: {
+      safari10: true
+    },
+    output: {
+      ecma: 5,
+      comments: false,
+      ascii_only: true
+    }
+  }
+}
+
+export default () => new TerserPlugin(config)

webpack/plugins/terser-plugin.js

@@ -0,0 +1,8 @@
+/**
+ * This plugin handles `.mjs` files correctly within webpack
+ * Docs: https://github.com/lukeed/webpack-modules
+ */
+
+import WebpackModules from "webpack-modules"
+
+export default () => new WebpackModules()

webpack/plugins/webpack-modules-plugin.js

@@ -1,9 +1,7 @@
-const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin")
-const merge = require("webpack-merge")
-const environment = require("./environment.js")
+import merge from "webpack-merge"
+import environment from "./environment"
+import { productionPlugins } from "./plugins"
 
 module.exports = merge(environment, {
-  plugins: [
-    new HtmlWebpackInlineSourcePlugin()
-  ]
+  plugins: productionPlugins
 })