pkg: Use webpack 5 by default

pkg: Use sass instead of node-sass

fix: Make devserver static asset serving consistent

BREAKING CHANGE: Dev mode static assets /assets/${buildDir} ->
/${buildDir}

(By default this means /assets/dist/ -> /dist/)

pkg: html plugin fixes compat issue

fix: sass-loader filecache compat

pkg: Bump style-only-imports

fix: polyfill node builtins for web target

fix: More comprehensive node polyfill

pkg: Maintain 4 compatibilitly

examples/linaria/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.12",
   "private": true,
   "scripts": {
-    "start": "webpack-dev-server --mode=development",
+    "start": "webpack serve --mode=development",
     "prod": "serve ./dist",
     "build": "webpack --mode=production",
     "build:server": "webpack --mode=production --target=node",

examples/typescript/package.json

@@ -3,7 +3,7 @@
   "version": "4.2.1",
   "private": true,
   "scripts": {
-    "start": "webpack-dev-server --mode=development",
+    "start": "webpack serve --mode=development",
     "prod": "serve ./dist",
     "build": "webpack --mode=production",
     "build:server": "webpack --mode=production --target=node",

examples/typescript/src/pages/Home/index.tsx

@@ -1,3 +1,5 @@
+import path from 'path';
+
 import style from './index.scss';
 import plain from './plain.css';
 import Worker from './my.worker.ts';
@@ -19,7 +21,7 @@ export default function Home() {
         World <a href="https://true.io">True IO</a>
       </p>
       <p className={plain.mountainTop}>
-        Ok again <img src={animated} />
+        Ok again <img src={animated} /> {path.join('/hi/bob', 'test.txt')}
       </p>
       <p>
         <img src={restHooks} />

package.json

@@ -6,8 +6,7 @@
       "examples/*"
     ],
     "nohoist": [
-      "**/html-webpack-plugin",
-      "**/mini-css-extract-plugin"
+      "**/@storybook/**"
     ]
   },
   "scripts": {
@@ -34,7 +33,7 @@
     "husky": "^3.0.9",
     "lerna": "^3.22.1",
     "typescript": "^4.0.2",
-    "webpack": "^4.44.1",
+    "webpack": "^5.2.0",
     "webpack-cli": "^4.1.0",
     "webpack-dev-server": "^3.11.0"
   },

packages/generator-js/src/webpack/templates/package.json.tpl

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "start": "webpack-dev-server --mode=development",
+    "start": "webpack serve --mode=development",
     "prod": "serve <%= assetPath %>",
     "build": "webpack --mode=production",
     "analyze": "webpack --mode=production --env analyze",

packages/webpack-config-anansi/README.md

@@ -30,7 +30,7 @@ module.exports = makeConfig(options);
 ```json
 {
   "scripts": {
-    "start": "webpack-dev-server --mode=development",
+    "start:dev": "webpack serve --mode=development",
     "build": "webpack --mode=production",
     "build:server": "webpack --mode=production --target=node",
     "analyze": "webpack --mode=production --env analyze",

packages/webpack-config-anansi/package.json

@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "@anansi/babel-preset": "^1.2.9",
-    "@babel/cli": "^7.10.5",
+    "@babel/cli": "^7.12.0",
     "@babel/core": "^7.12.0",
     "debug": "^4.1.1",
     "prettier-eslint-cli": "^5.0.0",
@@ -54,48 +54,69 @@
   "dependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
     "@svgr/webpack": "^5.4.0",
+    "assert": "^2.0.0",
     "autoprefixer": "^10.0.1",
     "babel-loader": "^8.1.0",
+    "browserify-zlib": "^0.2.0",
     "circular-dependency-plugin": "^5.2.0",
     "clean-webpack-plugin": "^3.0.0",
+    "console-browserify": "^1.2.0",
+    "constants-browserify": "^1.0.0",
     "critters-webpack-plugin": "^2.5.0",
+    "crypto-browserify": "^3.12.0",
     "css-loader": "^4.3.0",
+    "domain-browser": "^4.18.0",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "error-overlay-webpack-plugin": "^0.4.1",
+    "events": "^3.2.0",
     "file-loader": "^6.1.1",
     "hard-source-webpack-plugin": "^0.13.1",
     "html-webpack-plugin": "^4.5.0",
+    "https-browserify": "^1.0.0",
     "is-wsl": "^2.2.0",
     "markdown-loader": "^6.0.0",
     "mini-css-extract-plugin": "^1.0.0",
     "node-sass": "^4.14.1",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "os-browserify": "^0.3.0",
     "path": "^0.12.7",
+    "path-browserify": "^1.0.1",
     "postcss": "^8.1.1",
     "postcss-loader": "^4.0.4",
     "postcss-preset-env": "^6.7.0",
+    "process": "^0.11.10",
+    "punycode": "^2.1.1",
+    "querystring-es3": "^0.2.1",
     "ramda": "^0.26.1",
     "raw-loader": "4.0.2",
     "react-dev-utils": "^10.2.1",
     "react-docgen-typescript-loader": "^3.7.2",
-    "sass-loader": "^10.0.3",
+    "sass-loader": "^10.0.4",
     "sass-resources-loader": "^2.1.1",
     "stats-webpack-plugin": "^0.7.0",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.1.1",
+    "string_decoder": "^1.3.0",
     "svgo": "^1.3.2",
     "svgo-loader": "^2.2.1",
     "terser-webpack-plugin": "^4.2.3",
     "thread-loader": "^3.0.0",
+    "timers-browserify": "^2.0.11",
+    "tty-browserify": "^0.0.1",
+    "url": "^0.11.0",
     "url-loader": "^4.1.1",
+    "util": "^0.12.3",
+    "vm-browserify": "^1.1.2",
     "webpack-bundle-analyzer": "^3.9.0",
-    "webpack-fix-style-only-entries": "^0.5.2",
+    "webpack-fix-style-only-entries": "^0.6.0",
     "webpack-node-externals": "^2.5.2",
     "worker-loader": "^3.0.4"
   },
   "peerDependencies": {
     "@hot-loader/react-dom": "^16.0.0",
     "@storybook/react": "^6.0.0",
     "react-refresh": "^0.8.0",
-    "webpack": "^4.43.0 || ^5.0.0-beta.28",
+    "webpack": "^4.43.0 || ^5.0.0",
     "webpack-cli": "^4.1.0"
   },
   "peerDependenciesMeta": {

packages/webpack-config-anansi/src/base/index.js

@@ -1,8 +1,10 @@
 import path from 'path';
 import StatsPlugin from 'stats-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import webpack from 'webpack';
 
 import { ROOT_PATH, LIBRARY_MODULES_PATH } from './constants';
+import { NODE_ALIAS } from './node-polyfill';
 
 export { default as getStyleRules } from './scss';
 export { ROOT_PATH };
@@ -184,6 +186,7 @@ export default function makeBaseConfig({
         'node_modules',
       ],
       extensions: ['.js', '.ts', '.tsx', '.scss', '.json'],
+      alias: webpack.version.startsWith('4') ? {} : NODE_ALIAS,
     },
     // include the loaders installed by this library
     resolveLoader: {

packages/webpack-config-anansi/src/base/node-polyfill.js

@@ -0,0 +1,31 @@
+// extracted from https://github.com/webpack/node-libs-browser/blob/master/index.js
+export const NODE_ALIAS = {
+  stream: require.resolve('stream-browserify'),
+  path: require.resolve('path-browserify'),
+  crypto: require.resolve('crypto-browserify'),
+  buffer: require.resolve('buffer'),
+  vm: require.resolve('vm-browserify'),
+  assert: require.resolve('assert/'),
+  console: require.resolve('console-browserify'),
+  constants: require.resolve('constants-browserify'),
+  domain: require.resolve('domain-browser'),
+  events: require.resolve('events/'),
+  http: require.resolve('stream-http'),
+  https: require.resolve('https-browserify'),
+  os: require.resolve('os-browserify/browser.js'),
+  punycode: require.resolve('punycode/'),
+  process: require.resolve('process/browser.js'),
+  querystring: require.resolve('querystring-es3/'),
+  _stream_duplex: require.resolve('readable-stream/duplex.js'),
+  _stream_passthrough: require.resolve('readable-stream/passthrough.js'),
+  _stream_readable: require.resolve('readable-stream/readable.js'),
+  _stream_transform: require.resolve('readable-stream/transform.js'),
+  _stream_writable: require.resolve('readable-stream/writable.js'),
+  string_decoder: require.resolve('string_decoder/'),
+  sys: require.resolve('util/util.js'),
+  timers: require.resolve('timers-browserify'),
+  tty: require.resolve('tty-browserify'),
+  url: require.resolve('url/'),
+  util: require.resolve('util/util.js'),
+  zlib: require.resolve('browserify-zlib'),
+};

packages/webpack-config-anansi/src/dev.js

@@ -72,6 +72,7 @@ export default function makeDevConfig(
   }
   config.devServer = {
     hot: true,
+    publicPath: `/${buildDir}`,
     clientLogLevel: 'warning',
     headers: {
       'Access-Control-Allow-Origin': '*',
@@ -84,13 +85,16 @@ export default function makeDevConfig(
     open: true,
     historyApiFallback: {
       rewrites: [
-        { from: /^((?!\/assets).)*/, to: `/assets/${buildDir}index.html` },
+        {
+          from: new RegExp(`^((?!\\/${buildDir}).)*`, 'g'),
+          to: `/${buildDir}index.html`,
+        },
       ],
     },
     // TODO: add proxy options
   };
   config.devtool = 'cheap-module-source-map';
-  config.output.publicPath = `/assets/${buildDir}`;
+  config.output.publicPath = `/${buildDir}`;
   // if we know the port, force it in case this is encapsulated in another host
   if (argv.port) {
     config.output.publicPath = `http://localhost:${argv.port}${config.output.publicPath}`;

packages/webpack-config-anansi/src/node.js

@@ -2,6 +2,8 @@ import path from 'path';
 import nodeExternals from 'webpack-node-externals';
 import StatsPlugin from 'stats-webpack-plugin';
 
+import { NODE_ALIAS } from './base/node-polyfill';
+
 export default function makeNodeConfig(baseConfig, { rootPath, serverDir }) {
   const config = { ...baseConfig };
   config.target = 'node';
@@ -24,6 +26,11 @@ export default function makeNodeConfig(baseConfig, { rootPath, serverDir }) {
   config.plugins = config.plugins.filter(
     plugin => !(plugin instanceof StatsPlugin),
   );
+  // remove node polyfills as we will execute this in node
+  config.path.alias = { ...config.path.alias };
+  for (const alias in NODE_ALIAS) {
+    delete config.path.alias[alias];
+  }
 
   return config;
 }