Webpack upgrade take 5

.babelrc

@@ -26,17 +26,13 @@
   ],
   "env": {
     "test": {
-      "presets": ["@babel/preset-react"],
       "plugins": [
         "@babel/plugin-transform-modules-commonjs",
         "@babel/plugin-syntax-dynamic-import"
       ]
     },
     "library": {
-      "plugins": [
-        "babel-plugin-remove-webpack",
-        "@babel/plugin-transform-runtime"
-      ]
+      "plugins": ["@babel/plugin-transform-runtime"]
     },
     "production": {
       "plugins": ["@babel/plugin-syntax-dynamic-import"]

README.md

@@ -29,7 +29,7 @@ See the [usage documentation](./docs/usage.md) for more information.
     # Or: npm install
     npm start
 
-Open `http://localhost:8080/webpack-dev-server/` in your browser.
+`http://localhost:8080/` should automatically open in your browser.
 
     # Run tests and lint checks
     npm test

config/webpack.common.js

@@ -74,6 +74,11 @@ module.exports = {
     }),
     new HtmlWebpackInlineSVGPlugin({ runPreEmit: true })
   ],
+  performance: {
+    // We do some crazy shit okay! Don't judge!
+    maxEntrypointSize: 7000000,
+    maxAssetSize: 7000000
+  },
   entry: {
     webamp: ["./js/index.js"]
   },

config/webpack.dev.js

@@ -5,6 +5,7 @@ const common = require("./webpack.common.js");
 
 module.exports = merge(common, {
   devtool: "source-map",
+  mode: "development",
   plugins: [
     new webpack.DefinePlugin({
       SENTRY_DSN: JSON.stringify(

config/webpack.library.js

@@ -1,18 +1,12 @@
 const path = require("path");
-const webpack = require("webpack");
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
+const UnminifiedWebpackPlugin = require("unminified-webpack-plugin");
 
 module.exports = {
+  mode: "production",
   resolve: {
     extensions: [".js", ".ts", ".tsx"]
   },
-  node: {
-    // Consider suggesting jsmediatags use: https://github.com/feross/is-buffer
-    // Cuts 22k
-    Buffer: false,
-    fs: "empty"
-  },
   module: {
     rules: [
       {
@@ -50,26 +44,16 @@ module.exports = {
       reportFilename: "library-report.html",
       openAnalyzer: false
     }),
-    new webpack.DefinePlugin({
-      "process.env": {
-        NODE_ENV: JSON.stringify("production")
-      }
-    }),
-    new UglifyJsPlugin({
-      include: /\.min\.js$/,
-      parallel: true,
-      uglifyOptions: {
-        compress: {
-          // Workaround: https://github.com/mishoo/UglifyJS2/issues/2842
-          inline: false
-        }
-      }
-    })
+    // Also generate non-minified bundles.
+    new UnminifiedWebpackPlugin()
   ],
+  performance: {
+    // We do some crazy shit okay! Don't judge!
+    maxEntrypointSize: 9000000,
+    maxAssetSize: 9000000
+  },
   entry: {
-    bundle: "./js/webamp.js",
     "bundle.min": "./js/webamp.js",
-    "lazy-bundle": "./js/webampLazy.tsx",
     "lazy-bundle.min": "./js/webampLazy.tsx"
   },
   output: {

config/webpack.prod.js

@@ -2,7 +2,6 @@ const webpack = require("webpack");
 const merge = require("webpack-merge");
 const workboxPlugin = require("workbox-webpack-plugin");
 const GitRevisionPlugin = require("git-revision-webpack-plugin");
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 
 const common = require("./webpack.common.js");
@@ -11,32 +10,19 @@ const gitRevisionPlugin = new GitRevisionPlugin();
 
 const config = merge(common, {
   devtool: "source-map",
+  mode: "production",
   plugins: [
     new BundleAnalyzerPlugin({
       analyzerMode: "static",
       reportFilename: "prod-report.html",
       openAnalyzer: false
     }),
     new webpack.DefinePlugin({
-      "process.env": {
-        NODE_ENV: JSON.stringify("production")
-      },
       SENTRY_DSN: JSON.stringify(
         "https://[email protected]/146021"
       ),
       COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash())
     }),
-    new UglifyJsPlugin({
-      // TODO: Is this needed with the devtool setting above?
-      sourceMap: true,
-      parallel: true,
-      uglifyOptions: {
-        compress: {
-          // Workaround: https://github.com/mishoo/UglifyJS2/issues/2842
-          inline: false
-        }
-      }
-    }),
     new workboxPlugin.GenerateSW({
       swDest: "service-worker.js",
       // importWorkboxFrom: "local",

js/components/MilkdropWindow/options.ts

@@ -26,9 +26,9 @@ async function loadInitialDependencies(): Promise<
       )
   ]);
   return {
-    butterchurn,
-    minimalPresets: butterchurnMinimalPresets.getPresets(),
-    presetKeys: presetPackMeta.getMainPresetMeta().presets
+    butterchurn: butterchurn.default,
+    minimalPresets: butterchurnMinimalPresets.default.getPresets(),
+    presetKeys: presetPackMeta.default.getMainPresetMeta().presets
   };
 }
 

js/constants.ts

@@ -5,7 +5,7 @@ import {
   LoadStyle,
   TimeMode
 } from "./types";
-import * as baseSkin from "./baseSkin.json";
+import baseSkin from "./baseSkin.json";
 export const BANDS: Band[] = [
   60,
   170,

js/index.js

@@ -219,9 +219,10 @@ Raven.context(async () => {
     ],
     enableHotkeys: true,
     requireJSZip: () =>
-      import(/* webpackChunkName: "jszip" */ "jszip/dist/jszip"),
+      import(/* webpackChunkName: "jszip" */ "jszip/dist/jszip").default,
     requireMusicMetadata: () =>
-      import(/* webpackChunkName: "music-metadata-browser" */ "music-metadata-browser/dist/index"),
+      import(/* webpackChunkName: "music-metadata-browser" */ "music-metadata-browser/dist/index")
+        .default,
     __enableMediaLibrary: library,
     __initialWindowLayout,
     __initialState: screenshot ? screenshotInitialState : initialState,

package.json

@@ -17,7 +17,7 @@
     "analyze": "webpack --config=config/webpack.bundle-analyzer.js",
     "prepublishOnly": "npm run build-library",
     "serve": "http-server ./built",
-    "start": "webpack-dev-server --config=config/webpack.dev.js",
+    "start": "webpack-dev-server --open --config=config/webpack.dev.js",
     "stats": "webpack --config=config/webpack.prod.js --json > stats.json",
     "stats-library": "webpack --config=config/webpack.library.js --json > stats.json",
     "weight": "npm run build-library > /dev/null && gzip-size built/webamp.bundle.min.js",
@@ -71,25 +71,24 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^9.0.0-beta.3",
     "babel-jest": "^23.4.2",
-    "babel-loader": "^8.0.0-beta.6",
-    "babel-plugin-remove-webpack": "^1.1.0",
+    "babel-loader": "^8.0.4",
     "butterchurn": "^2.5.4",
     "butterchurn-presets": "^2.4.7",
     "canvas-mock": "0.0.0",
     "classnames": "^2.2.5",
-    "copy-webpack-plugin": "^4.5.1",
-    "css-loader": "^0.28.4",
+    "copy-webpack-plugin": "^4.6.0",
+    "css-loader": "^1.0.1",
     "eslint": "4.16.0",
     "eslint-config-prettier": "^2.3.0",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-no-constructor-bind": "^1.2.1",
     "eslint-plugin-prettier": "^2.2.0",
     "eslint-plugin-react": "^7.7.0",
-    "file-loader": "^1.1.5",
-    "git-revision-webpack-plugin": "^2.5.1",
+    "file-loader": "^2.0.0",
+    "git-revision-webpack-plugin": "^3.0.3",
     "gzip-size-cli": "^2.0.0",
     "html-webpack-inline-svg-plugin": "^1.2.4",
-    "html-webpack-plugin": "^3.0.6",
+    "html-webpack-plugin": "^3.2.0",
     "http-server": "^0.11.1",
     "idb-kv-store": "^4.4.0",
     "invariant": "^2.2.3",
@@ -117,19 +116,21 @@
     "redux-thunk": "^2.1.0",
     "reselect": "^3.0.1",
     "screenfull": "^3.3.2",
-    "style-loader": "^0.19.1",
+    "style-loader": "^0.23.1",
     "tinyqueue": "^1.2.3",
     "travis-weigh-in": "^1.0.2",
     "typescript": "^3.0.1",
     "uglifyjs-webpack-plugin": "^1.2.5",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.6.0",
-    "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-dev-server": "^2.7.1",
+    "unminified-webpack-plugin": "^2.0.0",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.26.0",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10",
     "webpack-merge": "^4.1.2",
-    "webpack-pwa-manifest": "^3.6.2",
+    "webpack-pwa-manifest": "^3.7.1",
     "winamp-eqf": "^1.0.0",
-    "workbox-webpack-plugin": "^3.0.0"
+    "workbox-webpack-plugin": "^3.6.3"
   },
   "jest": {
     "globalSetup": "jest-environment-puppeteer/setup",