Next

.github/workflows/build.yml

@@ -5,33 +5,24 @@ on: push
 jobs:
   lint:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [14.x]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - name: Use Node.js ${{matrix.node-version}}
-        uses: actions/setup-node@v1
+      # Cache packages when the branch is not update-dependencies or dependabot/*
+      - name: Resolve caching
+        id: cache
+        if: ${{ github.ref_name != 'update-dependencies' && !startsWith(github.ref_name, 'renovate/') }}
+        run: echo "::set-output name=PACKAGE::yarn"
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
         with:
+          cache: ${{ steps.cache.outputs.PACKAGE }}
+          node-version-file: '.nvmrc'
           always-auth: true
           registry-url: 'https://registry.npmjs.org'
-          node-version: ${{matrix.node-version}}
           scope: '@moonwalker'
 
-      # Cache yarn dependencies
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v1
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
       - run: yarn --frozen-lockfile
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
@@ -45,34 +36,25 @@ jobs:
     if: contains(github.ref, 'refs/tags/v')
 
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [14.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - name: Use Node.js ${{matrix.node-version}}
-        uses: actions/setup-node@v1
+      # Cache packages when the branch is not update-dependencies or dependabot/*
+      - name: Resolve caching
+        id: cache
+        if: ${{ github.ref_name != 'update-dependencies' && !startsWith(github.ref_name, 'renovate/') }}
+        run: echo "::set-output name=PACKAGE::yarn"
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
         with:
+          cache: ${{ steps.cache.outputs.PACKAGE }}
+          node-version-file: '.nvmrc'
           always-auth: true
           registry-url: 'https://registry.npmjs.org'
-          node-version: ${{matrix.node-version}}
           scope: '@moonwalker'
 
-      # Cache yarn dependencies
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v1
-        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
       - run: yarn --frozen-lockfile
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.nvmrc

@@ -0,0 +1 @@
+v18

config/release-it/branch.js

@@ -1,9 +1,10 @@
-const { merge } = require('lodash');
 const config = require('./common');
 
-module.exports = merge({}, config, {
+module.exports = {
+  ...config,
   git: {
+    ...config.git,
     // eslint-disable-next-line no-template-curly-in-string
     commitMessage: 'DROP - release ${version}'
   }
-});
+};

config/release-it/common.js

@@ -12,7 +12,9 @@ module.exports = {
     tagName: 'v${version}'
   },
   npm: {
-    publish: false
+    publish: false,
+    ignoreVersion: true,
+    allowSameVersion: true
   },
   github: {
     draft: false,

config/release-it/master.js

@@ -1,17 +1,20 @@
-const { merge } = require('lodash');
 const config = require('./common');
 
-module.exports = merge({}, config, {
+module.exports = {
+  ...config,
   git: {
+    ...config.git,
     // eslint-disable-next-line no-template-curly-in-string
     commitMessage: ':package: release ${version}'
   },
   github: {
+    ...config.github,
     release: true
   },
   plugins: {
-    // '@release-it/conventional-changelog': {
-    //   preset: 'eslint'
-    // }
+    ...config.plugins,
+    '@release-it/conventional-changelog': {
+      preset: 'angular'
+    }
   }
-});
+};

config/release-it/release.js

@@ -1,15 +1,17 @@
-const { merge } = require('lodash');
 const config = require('./common');
 
-module.exports = merge({}, config, {
+module.exports = {
+  ...config,
   git: {
+    ...config.git,
     commit: false,
     push: false,
     tag: false,
     requireCleanWorkingDir: false,
     requireUpstream: false
   },
   npm: {
+    ...config.npm,
     publish: true
   }
-});
+};

configs/babelrc.js

@@ -0,0 +1,53 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false
+      }
+    ],
+    '@babel/preset-react'
+  ],
+  plugins: [
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        corejs: false,
+        helpers: true,
+        regenerator: true,
+        useESModules: false
+      }
+    ],
+    '@babel/plugin-proposal-throw-expressions',
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-syntax-import-meta',
+    'babel-plugin-transform-react-remove-prop-types',
+    'graphql-tag',
+    'lodash',
+    'react-require'
+  ],
+  env: {
+    development: {
+      plugins: [require.resolve('react-refresh/babel')]
+    },
+    test: {
+      presets: ['@babel/preset-env', '@babel/preset-react'],
+      plugins: [
+        '@babel/plugin-proposal-throw-expressions',
+        '@babel/plugin-syntax-dynamic-import',
+        '@babel/plugin-syntax-import-meta',
+        'react-require'
+      ]
+    },
+    render: {
+      presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-react'],
+      plugins: [
+        '@babel/plugin-proposal-throw-expressions',
+        '@babel/plugin-syntax-dynamic-import',
+        '@babel/plugin-syntax-import-meta',
+        'babel-plugin-transform-react-remove-prop-types',
+        'react-require'
+      ]
+    }
+  }
+};

configs/eslint.js

@@ -1,13 +1,7 @@
-const path = require('path');
-
-const extendConfigPath = path.join(
-  path.dirname(require.resolve('@moonwalker/pre-flight-check')),
-  'eslint'
-);
-
 module.exports = {
-  extends: extendConfigPath,
   globals: {
-    APP_CONFIG: true
+    APP_CONFIG: true,
+    __CLIENT__: true,
+    __SERVER__: true
   }
 };

index.js

@@ -0,0 +1 @@
+module.exports.webpackConfigs = require('./src/webpack/config');

package.json

@@ -1,11 +1,12 @@
 {
   "name": "@moonwalker/jetpack",
-  "version": "3.2.5",
+  "version": "4.2.0-beta.20",
   "description": "Webpack for Moonwalkers",
   "license": "MIT",
   "bin": {
     "jetpack": "bin/jetpack.sh"
   },
+  "main": "index.js",
   "types": "types/index.d.ts",
   "scripts": {
     "start": "bin/jetpack.js",
@@ -17,70 +18,67 @@
     "release": "./scripts/release.sh"
   },
   "dependencies": {
-    "@babel/core": "7.14.6",
-    "@babel/plugin-proposal-export-namespace-from": "7.14.5",
-    "@babel/plugin-proposal-function-sent": "7.14.5",
-    "@babel/plugin-proposal-throw-expressions": "7.14.5",
+    "@babel/core": "7.19.3",
+    "@babel/plugin-proposal-export-namespace-from": "7.18.9",
+    "@babel/plugin-proposal-function-sent": "7.18.6",
+    "@babel/plugin-proposal-throw-expressions": "7.18.6",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-import-meta": "7.10.4",
-    "@babel/plugin-transform-runtime": "7.14.5",
-    "@babel/preset-env": "7.14.7",
-    "@babel/preset-react": "7.14.5",
-    "@moonwalker/pre-flight-check": "1.3.5",
-    "assets-webpack-plugin": "5.1.2",
-    "async": "3.2.0",
-    "autoprefixer": "10.2.6",
-    "babel-jest": "27.0.5",
-    "babel-loader": "8.2.2",
+    "@babel/plugin-transform-runtime": "7.19.1",
+    "@babel/preset-env": "7.19.4",
+    "@babel/preset-react": "7.18.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.7",
+    "assets-webpack-plugin": "7.1.1",
+    "async": "3.2.4",
+    "autoprefixer": "10.4.8",
+    "babel-jest": "28.1.3",
+    "babel-loader": "8.2.5",
     "babel-plugin-graphql-tag": "3.3.0",
     "babel-plugin-lodash": "3.3.4",
     "babel-plugin-react-docgen": "4.2.1",
     "babel-plugin-react-require": "3.1.3",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-    "bundle-stats-webpack-plugin": "3.0.1",
-    "clean-webpack-plugin": "3.0.0",
-    "copy-webpack-plugin": "6.4.0",
-    "css-loader": "5.2.6",
-    "cssnano": "5.0.6",
-    "debug": "4.3.1",
-    "dotenv": "10.0.0",
-    "fetch-cached": "2.0.3",
+    "clean-webpack-plugin": "4.0.0",
+    "copy-webpack-plugin": "11.0.0",
+    "css-loader": "6.7.1",
+    "cssnano": "5.1.12",
+    "debug": "4.3.4",
+    "dotenv": "16.0.1",
     "file-loader": "6.2.0",
-    "friendly-errors-webpack-plugin": "1.7.0",
-    "fs-extra": "10.0.0",
-    "generate-json-webpack-plugin": "1.0.0",
-    "graphql": "15.5.1",
-    "graphql-tag": "2.12.4",
+    "fs-extra": "10.1.0",
+    "generate-json-webpack-plugin": "2.0.0",
+    "graphql": "16.5.0",
+    "graphql-tag": "2.12.6",
     "html-minifier": "4.0.0",
-    "html-webpack-plugin": "4.5.2",
-    "jest": "27.0.5",
+    "html-webpack-plugin": "5.5.0",
+    "jest": "28.1.3",
     "json-stringify-safe": "5.0.1",
     "lodash": "4.17.21",
-    "mini-css-extract-plugin": "1.6.0",
-    "node-fetch": "2.6.1",
-    "postcss": "8.3.5",
-    "postcss-loader": "4.3.0",
-    "postcss-reporter": "7.0.2",
+    "mini-css-extract-plugin": "2.6.1",
+    "node-fetch": "3.2.10",
+    "postcss": "8.4.14",
+    "postcss-loader": "7.0.1",
+    "postcss-reporter": "7.0.5",
     "promise-retry": "2.0.1",
+    "react-refresh": "0.14.0",
     "react-svg-loader": "3.0.3",
-    "source-map-loader": "^1.1.2",
+    "speed-measure-webpack-plugin": "1.5.0",
     "stats-webpack-plugin": "0.7.0",
-    "style-loader": "2.0.0",
-    "stylelint": "13.13.1",
-    "stylus": "0.54.8",
-    "stylus-loader": "3.0.2",
-    "terser-webpack-plugin": "4.2.3",
-    "webpack": "4.44.1",
-    "webpack-bundle-analyzer": "4.4.2",
-    "webpack-cli": "4.7.2",
-    "webpack-dev-server": "3.11.2",
+    "style-loader": "3.3.1",
+    "stylelint": "14.9.1",
+    "stylus": "0.58.1",
+    "stylus-loader": "7.0.0",
+    "terser-webpack-plugin": "5.3.3",
+    "webpack": "5.74.0",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.9.3",
     "webpack-merge": "4.2.2",
     "workbox-webpack-plugin": "4.3.1",
-    "worker-farm": "1.7.0",
-    "xmlbuilder": "15.1.1"
+    "worker-farm": "1.7.0"
   },
   "devDependencies": {
-    "@release-it/conventional-changelog": "2.0.1",
-    "release-it": "14.6.2"
+    "@moonwalker/pre-flight-check": "1.4.6",
+    "@release-it/conventional-changelog": "5.0.0",
+    "release-it": "15.2.0"
   }
 }

renovate.json

@@ -1,9 +1,10 @@
 {
   "extends": ["config:base"],
-  "timezone": "CET",
-  "schedule": ["after 1am and before 6am"],
-  "prHourlyLimit": 20,
+  "timezone": "Europe/Madrid",
+  "schedule": ["after 1am and before 6am on wednesday"],
+  "automergeSchedule": ["after 1am and before 6am on wednesday"],
+  "prHourlyLimit": 10,
   "baseBranches": ["update-dependencies"],
   "automerge": true,
-  "semanticCommits": true
+  "semanticCommits": "enabled"
 }

scripts/release.sh

@@ -3,4 +3,4 @@
 TAG=$(git describe --tags --abbrev=0)
 VERSION=${TAG:1}
 
-./node_modules/.bin/release-it --config ./config/release-it/release.js --ci $VERSION
+./node_modules/.bin/release-it $VERSION --config ./config/release-it/release.js --ci

src/constants.js

@@ -8,6 +8,7 @@ module.exports.ENV = process.env.ENV || process.env.env || '';
 
 module.exports.CONTENT_SVC = process.env.CONTENT_SVC || '127.0.0.1:51051';
 module.exports.SVCNAME = process.env.SVCNAME || 'jetpack-server';
+module.exports.PRODUCT = process.env.PRODUCT || 'jetpack';
 module.exports.COMMIT = (process.env.COMMIT || 'dev').substring(0, 7);
 module.exports.BUILT = process.env.BUILT || 'n/a';
 module.exports.NAMESPACE = process.env.NAMESPACE || 'default';

src/utils/index.js

@@ -1,6 +1,6 @@
 const { execSync } = require('child_process');
 
-const { ENV, NAMESPACE, RELEASE, API_HOST, TRACK_HOST } = require('../constants');
+const { ENV, NAMESPACE, RELEASE, API_HOST, TRACK_HOST, PRODUCT } = require('../constants');
 const debug = require('./debug');
 const perf = require('./perf');
 
@@ -9,7 +9,7 @@ const getCommitId = () =>
   process.env.COMMIT || execSync('git rev-parse --short HEAD').toString().trim();
 
 const getEnvMiddleware = () => (_, reply) => {
-  const config = { ENV, NAMESPACE, RELEASE, API_HOST, TRACK_HOST };
+  const config = { ENV, NAMESPACE, RELEASE, API_HOST, TRACK_HOST, PRODUCT };
 
   reply
     .header('Cache-Control', 'no-store, no-cache, must-revalidate')

src/webpack/config/common-chunks.js

@@ -8,16 +8,12 @@ module.exports = () => ({
 
     // Hashed module ids
     // https://webpack.js.org/configuration/optimization/#optimization-moduleids
-    moduleIds: 'hashed',
+    moduleIds: 'deterministic',
 
     // Code spllitting
     splitChunks: {
       chunks: 'all',
 
-      // Using named chunks is causing cache invalidation when the chunk will
-      // be used by another chunk. Keeping names for tracking & debugging.
-      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      name: true,
       hidePathInfo: false,
 
       // Disable automatically chunking for async chunks

src/webpack/config/css.js

@@ -22,9 +22,8 @@ module.exports = (options, env) => {
           modules: {
             exportOnlyLocals: node,
             localIdentContext: paths.src,
-            localIdentName: isDevelopment
-              ? '[path]__[name]__[local]__[hash:base64:5]'
-              : '[hash:base64:5]'
+            localIdentName: isDevelopment ? '[path]__[name]__[local]__[hash]' : '[hash]',
+            localIdentHashDigestLength: 5
           }
         }
       },

src/webpack/config/define.js

@@ -6,10 +6,11 @@ module.exports = (options = {}) => {
   return {
     plugins: [
       new webpack.DefinePlugin({
-        'process.browser': JSON.stringify(isClient),
-        'process.env.STORYBOOK': JSON.stringify(isStorybook),
-        'process.env.SENTRY_CLIENT_DSN': JSON.stringify(process.env.SENTRY_CLIENT_DSN),
-        'process.env.PRODUCT': JSON.stringify(process.env.PRODUCT)
+        'process.env.ENV': JSON.stringify(process.env.ENV),
+        'process.env.API_HOST_SSR': JSON.stringify(process.env.API_HOST_SSR),
+        'process.browser': isClient,
+        'process.env.STORYBOOK': isStorybook || JSON.stringify(process.env.STORYBOOK),
+        'process.env.SENTRY_CLIENT_DSN': JSON.stringify(process.env.SENTRY_CLIENT_DSN)
       })
     ]
   };

src/webpack/config/javascript.js

@@ -2,13 +2,6 @@ module.exports = (options) => {
   const { include = [], cache = false } = options;
   const test = /\.jsx?$/;
 
-  const sourceMapRule = {
-    test,
-    enforce: 'pre',
-    include: () => true, // process source-maps across all folders - works when linked
-    loader: 'source-map-loader'
-  };
-
   const babelRule = {
     test,
     include,
@@ -18,17 +11,10 @@ module.exports = (options) => {
     }
   };
 
-  const stats = {
-    warningsFilter: [/Failed to parse source map/]
-  };
-
   return {
     module: {
-      rules: [babelRule, sourceMapRule]
+      rules: [babelRule]
     },
-    stats,
-    devServer: {
-      stats
-    }
+    ignoreWarnings: [/Failed to parse source map/]
   };
 };

src/webpack/config/stats.js

@@ -1,12 +1,8 @@
 const path = require('path');
 const StatsPlugin = require('stats-webpack-plugin');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const { BundleStatsWebpackPlugin } = require('bundle-stats-webpack-plugin');
 
 const { paths } = require('../defaults');
 
-const ARTIFACTS_REL_DIR = path.relative(paths.output.path, paths.artifacts.path);
-
 const STATS = {
   context: paths.src,
   excludeAssets: [/artifacts/],
@@ -19,21 +15,11 @@ const STATS = {
   source: false
 };
 
-module.exports = () => ({
-  plugins: [
-    new BundleAnalyzerPlugin({
-      analyzerMode: 'static',
-      openAnalyzer: false,
-      reportFilename: path.join(paths.artifacts.path, 'bundle-analysis.html'),
-      generateStatsFile: false,
-      statsOptions: STATS
-    }),
-
-    new StatsPlugin(path.join(ARTIFACTS_REL_DIR, 'webpack-stats.json'), STATS),
+module.exports = ({ outputDir, isClient = true }) => {
+  const artifactsRelDir = path.relative(outputDir, paths.artifacts.path);
+  const suffix = isClient ? 'client' : 'render';
 
-    new BundleStatsWebpackPlugin({
-      outDir: ARTIFACTS_REL_DIR,
-      stats: STATS
-    })
-  ]
-});
+  return {
+    plugins: [new StatsPlugin(path.join(artifactsRelDir, `webpack-stats--${suffix}.json`), STATS)]
+  };
+};

src/webpack/config/stylus.js

@@ -7,7 +7,9 @@ module.exports = (options = {}) => {
     enforce: 'pre',
     loader: 'stylus-loader',
     options: {
-      paths: include
+      stylusOptions: {
+        paths: include
+      }
     }
   };
 

src/webpack/index.js

@@ -7,7 +7,6 @@ const { spawn } = require('child_process');
 const { ENV } = require('../constants');
 const { debug } = require('../utils');
 const { context, config } = require('./defaults');
-const { renderConfig, clientConfig } = require('./webpack.config.prd');
 
 const printStats = (mode, stats) => {
   process.stdout.write('\n');
@@ -38,22 +37,25 @@ const start = () => {
 };
 
 const compileWebpackConfig = (webpackConfig) =>
-  new Promise((resolve, reject) =>
+  new Promise((resolve, reject) => {
     webpack(webpackConfig).run((err, stats) => {
       if (err) {
         reject(err);
       }
 
       resolve(stats);
-    })
-  );
+    });
+  });
 
 const buildClient = () => {
   const log = debug('build:client');
   log('PRD:', config.productName);
   log('ENV:', ENV);
   log('API:', config.queryApiUrl);
 
+  // eslint-disable-next-line global-require
+  const { clientConfig } = require('./webpack.config.prd');
+
   return compileWebpackConfig(clientConfig).then((stats) => printStats('Client', stats));
 };
 
@@ -63,6 +65,11 @@ const buildRender = () => {
   log('ENV:', ENV);
   log('API:', config.queryApiUrl);
 
+  process.env.BABEL_ENV = 'render';
+
+  // eslint-disable-next-line global-require
+  const { renderConfig } = require('./webpack.config.prd');
+
   return compileWebpackConfig(renderConfig).then((renderStats) =>
     printStats('Render', renderStats)
   );

src/webpack/presets/css-client-delivery.js

@@ -0,0 +1,55 @@
+/**
+ * Deliver CSS assets
+ *
+ * style-loader or mini-css-extract
+ */
+
+const { merge } = require('lodash');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = (options = {}) => {
+  const {
+    isDevelopment = false,
+
+    rule = {},
+    miniCssExtractLoaderOptions = {},
+    miniCssExtractPluginOptions = {}
+  } = options;
+
+  const defaultMiniCssExtractLoaderOptions = {
+    esModule: false
+  };
+
+  const defaultMiniCssExtractPluginOptions = {
+    filename: isDevelopment ? '[name].css' : '[path][name].[contenthash].css'
+  };
+
+  return {
+    module: {
+      rules: [
+        {
+          test: /\.(css|sass|scss|less|styl)$/,
+          enforce: 'post', // run after the processing rule (see css.js)
+          ...rule,
+          use: [
+            isDevelopment
+              ? 'style-loader'
+              : {
+                  loader: MiniCssExtractPlugin.loader,
+                  options: merge(defaultMiniCssExtractLoaderOptions, miniCssExtractLoaderOptions)
+                }
+          ]
+        }
+      ]
+    },
+    plugins: [
+      ...(!isDevelopment
+        ? [
+            new MiniCssExtractPlugin(
+              merge(defaultMiniCssExtractPluginOptions, miniCssExtractPluginOptions)
+            )
+          ]
+        : [])
+    ]
+  };
+};

src/webpack/presets/css.js

@@ -0,0 +1,74 @@
+/**
+ * Process CSS files
+ * 1. postcss-loader
+ * 2. css-loader
+ */
+
+const { merge } = require('lodash');
+const autoprefixer = require('autoprefixer');
+const stylelint = require('stylelint');
+const cssnano = require('cssnano');
+const postcssReporter = require('postcss-reporter');
+
+module.exports = (options = {}) => {
+  const {
+    isDevelopment = false,
+    isNode = false,
+    lint = false,
+
+    rule = {},
+    cssLoaderOptions = {},
+    postcssLoaderOptions = {}
+  } = options;
+
+  const defaultCssLoaderOptions = {
+    esModule: false,
+    modules: {
+      mode: 'local',
+      exportOnlyLocals: isNode,
+      localIdentName: isDevelopment ? '[path]__[name]__[local]' : '[hash]',
+      localIdentHashDigestLength: 5
+    }
+  };
+
+  const defaultPostcssLoaderOptions = {
+    postcssOptions: {
+      plugins: []
+        .concat(lint && stylelint())
+        .concat(autoprefixer())
+        .concat(
+          !isDevelopment &&
+            cssnano({
+              preset: [
+                'default',
+                {
+                  normalizeUrl: false // Avoid removing the relative (`./`) notation, required for webpack
+                }
+              ]
+            })
+        )
+        .concat(postcssReporter({ clearAllMessages: true }))
+    }
+  };
+
+  return {
+    module: {
+      rules: [
+        {
+          test: /\.(css|sass|scss|less|styl)$/,
+          ...rule,
+          use: [
+            {
+              loader: require.resolve('css-loader'),
+              options: merge(defaultCssLoaderOptions, cssLoaderOptions)
+            },
+            {
+              loader: require.resolve('postcss-loader'),
+              options: merge(defaultPostcssLoaderOptions, postcssLoaderOptions)
+            }
+          ]
+        }
+      ]
+    }
+  };
+};

src/webpack/presets/javascript.js

@@ -0,0 +1,32 @@
+const { merge } = require('lodash');
+
+/**
+ * @param {object} options
+ * @param {boolean} [options.isDevelopment]
+ * @param {object} [options.rule]
+ * @param {object} [options.babelLoaderOptions]
+ * @returns {object}
+ */
+module.exports = function createJavascriptConfig(options = {}) {
+  const { isDevelopment = false, rule = {}, babelLoaderOptions = {} } = options;
+
+  const defaultBabelOptions = {
+    cacheDirectory: isDevelopment
+  };
+
+  return {
+    module: {
+      rules: [
+        merge(
+          {
+            test: /\.(js|ts)x?$/,
+            loader: require.resolve('babel-loader'),
+            options: merge(defaultBabelOptions, babelLoaderOptions)
+          },
+          rule
+        )
+      ]
+    },
+    ignoreWarnings: [/Failed to parse source map/]
+  };
+};

src/webpack/tools.js

@@ -0,0 +1,5 @@
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+
+module.exports.speedMeasurePlugin = new SpeedMeasurePlugin({
+  disable: !process.env.WEBPACK_SPEED_MEASURE
+});

src/webpack/webpack.config.dev.js

@@ -1,21 +1,22 @@
-const webpack = require('webpack');
 const { get } = require('lodash');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const { getEnvMiddleware } = require('../utils');
 const constants = require('../constants');
 const mergeConfigs = require('./mergeConfigs');
 const {
-  createJavascriptConfig,
   createResolveConfig,
-  createCssConfig,
-  createStylusConfig,
   createFileConfig,
   createSvgConfig,
   createDefineConfig
 } = require('./config');
+const createCssConfig = require('./presets/css');
+const createCssDeliveryConfig = require('./presets/css-client-delivery');
+const createJavascriptConfig = require('./presets/javascript');
 const settings = require('./defaults');
+const { speedMeasurePlugin } = require('./tools');
 
 const env = {
   CLIENT: true,
@@ -28,19 +29,20 @@ const { paths } = settings;
 const devConfig = {
   mode: 'development',
   context: paths.src,
-  devtool: 'cheap-module-eval-source-mapp',
   entry: {
     init: paths.entry.init,
     main: paths.entry.main
   },
+  target: 'web',
+  devtool: 'cheap-module-source-map',
   output: {
     path: paths.output.path,
     filename: paths.output.filenameDev,
     chunkFilename: paths.output.filenameDev,
     publicPath: paths.output.publicPath
   },
   plugins: [
-    new webpack.NamedModulesPlugin(),
+    new ReactRefreshWebpackPlugin(),
     new HtmlWebpackPlugin({
       template: paths.public.template,
       head: get(settings, 'config.additional.global.head')
@@ -51,70 +53,78 @@ const devConfig = {
           from: paths.public.root
         }
       ]
-    }),
-    new webpack.HotModuleReplacementPlugin()
+    })
   ],
   devServer: {
     port: constants.DEV_PORT,
-    contentBase: paths.output.path,
-    publicPath: paths.output.publicPath,
     hot: true,
-    watchContentBase: true,
-    disableHostCheck: true,
-    watchOptions: {
-      ignored: /node_modules/
-    },
     historyApiFallback: true,
-    before: (app) => {
-      app.get('/env.js', getEnvMiddleware());
+    allowedHosts: 'all',
+    setupMiddlewares: (middlewares, devServer) => {
+      devServer.app.get('/env.js', getEnvMiddleware());
+      return middlewares;
+    },
+    client: {
+      logging: 'info',
+      progress: false,
+      overlay: {
+        errors: true,
+        warnings: false
+      }
     },
-    stats: {
-      assets: false,
-      chunks: false,
-      entrypoints: false,
-      children: false,
-      modules: false
+    static: {
+      directory: paths.public.root,
+      watch: true
     }
   },
   optimization: {
-    splitChunks: false
+    runtimeChunk: 'single'
   }
 };
 
-module.exports = mergeConfigs(
-  [
-    devConfig,
+module.exports = speedMeasurePlugin.wrap(
+  mergeConfigs(
+    [
+      devConfig,
 
-    createResolveConfig(),
-    createJavascriptConfig(
-      {
-        include: paths.src,
-        cache: true
-      },
-      env
-    ),
-    createCssConfig(
-      {
-        include: paths.src,
-        lint: true
-      },
-      env
-    ),
-    createStylusConfig({
-      include: paths.src,
-      root: paths.root
-    }),
-    createFileConfig(
-      {
+      createResolveConfig(),
+      createJavascriptConfig({
+        isDevelopment: true,
+        rule: {
+          include: paths.src
+        }
+      }),
+
+      // createStylusConfig({
+      //   include: paths.src,
+      //   root: paths.root
+      // }),
+      createCssConfig({
+        isDevelopment: true,
+        lint: true,
+        rule: {
+          include: paths.src
+        }
+      }),
+      createCssDeliveryConfig({
+        isDevelopment: true,
+        rule: {
+          include: paths.src
+        }
+      }),
+
+      createFileConfig(
+        {
+          context: paths.src
+        },
+        env
+      ),
+      createSvgConfig({
         context: paths.src
-      },
-      env
-    ),
-    createSvgConfig({
-      context: paths.src
-    }),
-    createDefineConfig({ isClient: true })
-  ],
-  settings,
-  env
+      }),
+      createDefineConfig({ isClient: true })
+    ],
+    settings,
+    env
+  )
 );

src/webpack/webpack.config.prd.js

@@ -8,18 +8,18 @@ const constants = require('../constants');
 const mergeConfigs = require('./mergeConfigs');
 const settings = require('./defaults');
 const {
-  createJavascriptConfig,
   createResolveConfig,
   createFileConfig,
-  createCssConfig,
-  createStylusConfig,
   createCommonChunks,
   createServiceWorkerConfig,
   createBuildInfo,
   createStatsConfig,
   createSvgConfig,
   createDefineConfig
 } = require('./config');
+const createCssConfig = require('./presets/css');
+const createCssClientDeliveryConfig = require('./presets/css-client-delivery');
+const createJavascriptConfig = require('./presets/javascript');
 
 const env = {
   ...constants,
@@ -39,17 +39,23 @@ const SERVER_ENV = {
 
 const { context, paths } = settings;
 
+const productionConfig = {
+  bail: true,
+  mode: 'production',
+  context,
+  devtool: 'source-map',
+  plugins: [new CleanWebpackPlugin()]
+};
+
 const clientConfig = mergeConfigs(
   [
+    productionConfig,
     {
-      bail: true,
-      mode: 'production',
-      context,
-      devtool: 'source-map',
       entry: {
         init: paths.entry.init,
         main: paths.entry.main
       },
+      target: 'web',
       output: {
         path: paths.output.path,
         filename: paths.output.filename,
@@ -58,63 +64,52 @@ const clientConfig = mergeConfigs(
         hashDigestLength: 8
       },
       plugins: [
-        new CleanWebpackPlugin(),
         new webpack.DefinePlugin({
           __CLIENT__: JSON.stringify(true),
           __SERVER__: JSON.stringify(false)
         }),
-        new webpack.optimize.ModuleConcatenationPlugin(),
-        new webpack.HashedModuleIdsPlugin(),
         new CopyWebpackPlugin({
           patterns: [
             {
               from: paths.public.root
             }
           ]
         }),
-        new AssetsPlugin({
-          ...paths.assets
-        })
+        new AssetsPlugin({ ...paths.assets })
       ],
       optimization: {
-        chunkIds: 'named',
-        minimizer: [
-          new TerserPlugin({
-            parallel: true,
-            sourceMap: true
-          })
-        ]
+        minimizer: [new TerserPlugin({ parallel: 4 })],
+        runtimeChunk: 'single'
       }
     },
     createResolveConfig(),
-    createJavascriptConfig(
-      {
+    createJavascriptConfig({
+      rule: {
+        include: paths.src
+      }
+    }),
+
+    // createStylusConfig({ include: paths.src }),
+    createCssConfig({
+      rule: {
+        include: paths.src
+      }
+    }),
+    createCssClientDeliveryConfig({
+      rule: {
         include: paths.src
       },
-      CLIENT_ENV
-    ),
-    createCssConfig(
-      {
-        include: paths.src,
-        minimize: true,
-        extractChunks: true,
+      miniCssExtractPluginOptions: {
         filename: paths.output.cssFilename
-      },
-      CLIENT_ENV
-    ),
-    createStylusConfig({
-      include: paths.src
+      }
     }),
+
     createFileConfig({ context: paths.src }, CLIENT_ENV),
     createSvgConfig({ context: paths.src }),
     createCommonChunks(),
-    createBuildInfo({
-      output: paths.output.buildInfo
-    }),
-    createStatsConfig(),
-    createServiceWorkerConfig({
-      swDest: paths.output.swDest
-    }),
+    createBuildInfo({ output: paths.output.buildInfo }),
+    createStatsConfig({ outputDir: paths.output.path, isClient: true }),
+    createServiceWorkerConfig({ swDest: paths.output.swDest }),
     createDefineConfig({ isClient: true })
   ],
   settings,
@@ -123,11 +118,9 @@ const clientConfig = mergeConfigs(
 
 const renderConfig = mergeConfigs(
   [
+    productionConfig,
     {
-      bail: true,
-      mode: 'production',
-      context,
-      target: 'node',
+      externalsPresets: { node: true },
       entry: {
         render: paths.entry.render
       },
@@ -137,8 +130,11 @@ const renderConfig = mergeConfigs(
         libraryTarget: 'commonjs2',
         publicPath: paths.output.publicPath
       },
+      target: 'node',
+      resolve: {
+        mainFields: ['main', 'module']
+      },
       plugins: [
-        new CleanWebpackPlugin(),
         new webpack.DefinePlugin({
           __CLIENT__: JSON.stringify(false),
           __SERVER__: JSON.stringify(true)
@@ -147,38 +143,29 @@ const renderConfig = mergeConfigs(
           maxChunks: 1
         })
       ],
-      devtool: 'source-map',
       optimization: {
         minimize: false
+      },
+      performance: {
+        hints: false
       }
     },
     createResolveConfig(),
-    createJavascriptConfig(
-      {
+    createJavascriptConfig({
+      rule: {
         include: paths.src
-      },
-      SERVER_ENV
-    ),
-    createCssConfig(
-      {
-        include: paths.src,
-        node: true
-      },
-      SERVER_ENV
-    ),
-    createStylusConfig({
-      include: paths.src
+      }
     }),
-    createFileConfig(
-      {
-        context: paths.src,
-        emitFile: false
-      },
-      SERVER_ENV
-    ),
-    createSvgConfig({
-      context: paths.src
+    createCssConfig({
+      isNode: true,
+      rule: {
+        include: paths.src
+      }
     }),
+    // createStylusConfig({ include: paths.src }),
+    createFileConfig({ context: paths.src, emitFile: false }, SERVER_ENV),
+    createSvgConfig({ context: paths.src }),
+    createStatsConfig({ outputDir: paths.render.path, isClient: false }),
     createDefineConfig({ isClient: false })
   ],
   settings,