chore: migrate to webpack 4

benchmark/benchmark.js

@@ -36,7 +36,7 @@ console.log('Starging benchmark server');
 const proc = spawn('npm', ['run', 'start:benchmark']);
 
 proc.stdout.on('data', data => {
-  if (data.toString().indexOf('webpack: Compiled successfully') > -1) {
+  if (data.toString().indexOf('Compiled successfully') > -1) {
     console.log('Server started');
     startBenchmark();
   }

custom.d.ts

@@ -13,7 +13,6 @@ declare module '*.css' {
   export default content;
 }
 
-declare var __REDOC_DEV__: boolean;
 declare var __REDOC_VERSION__: string;
 declare var __REDOC_REVISION__: string;
 

demo/webpack.config.ts

@@ -1,5 +1,7 @@
 import * as webpack from 'webpack';
 import * as HtmlWebpackPlugin from 'html-webpack-plugin';
+import * as ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import { resolve } from 'path';
 
 const VERSION = JSON.stringify(require('../package.json').version);
 const REVISION = JSON.stringify(
@@ -9,22 +11,54 @@ const REVISION = JSON.stringify(
     .trim(),
 );
 
-export default {
+function root(filename) {
-  entry: __dirname + '/index.tsx',
+  return resolve(__dirname + '/' + filename);
+}
+
+const tsLoader = env => ({
+  loader: 'ts-loader',
+  options: {
+    compilerOptions: {
+      module: env.bench ? 'esnext' : 'es2015',
+    },
+  },
+});
+
+const babelHotLoader = {
+  loader: 'babel-loader',
+  options: {
+    plugins: [
+      '@babel/plugin-syntax-typescript',
+      '@babel/plugin-syntax-decorators',
+      '@babel/plugin-syntax-jsx',
+      'react-hot-loader/babel',
+    ],
+  },
+};
+
+export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) => ({
+  entry: [
+    root('../src/polyfills.ts'),
+    root(
+      env.playground
+        ? 'playground/hmr-playground.tsx'
+        : env.bench ? '../benchmark/index.tsx' : 'index.tsx',
+    ),
+  ],
   output: {
     filename: 'redoc-demo.bundle.js',
-    path: __dirname + '/dist',
+    path: root('dist'),
+    globalObject: 'this',
   },
 
   devServer: {
     contentBase: __dirname,
     watchContentBase: true,
-    port: 8081,
+    port: 9090,
-    stats: 'errors-only',
+    disableHostCheck: true,
+    stats: 'minimal',
   },
 
-  devtool: 'eval',
-
   resolve: {
     extensions: ['.ts', '.tsx', '.js', '.json'],
   },
@@ -33,21 +67,15 @@ export default {
     fs: 'empty',
   },
 
+  performance: false,
+
   module: {
     rules: [
       { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
       { test: [/\.eot$/, /\.gif$/, /\.woff$/, /\.svg$/, /\.ttf$/], use: 'null-loader' },
       {
         test: /\.tsx?$/,
-        use: [
+        use: mode === 'production' ? [tsLoader(env)] : [tsLoader(env), babelHotLoader],
-          'react-hot-loader/webpack',
-          {
-            loader: 'ts-loader',
-            options: {
-              module: 'es2015',
-            },
-          },
-        ],
         exclude: ['node_modules'],
       },
       {
@@ -64,25 +92,27 @@ export default {
         test: /node_modules\/(swagger2openapi|reftools)\/.*\.js$/,
         use: {
           loader: 'ts-loader',
+          options: {
             transpileOnly: true,
             instance: 'ts2js-transpiler-only',
-          options: {
+            compilerOptions: {
               allowJs: true,
             },
           },
         },
+      },
     ],
   },
   plugins: [
     new webpack.DefinePlugin({
       __REDOC_VERSION__: VERSION,
       __REDOC_REVISION__: REVISION,
-      __REDOC_DEV__: false,
     }),
     new webpack.NamedModulesPlugin(),
     new webpack.optimize.ModuleConcatenationPlugin(),
     new HtmlWebpackPlugin({
-      template: 'demo/index.html',
+      template: env.playground ? 'demo/playground/index.html' : 'demo/index.html',
     }),
+    new ForkTsCheckerWebpackPlugin(),
   ],
-};
+});

e2e/plugins/cy-ts-preprocessor.js

@@ -4,6 +4,7 @@ const webpackOptions = {
   resolve: {
     extensions: ['.ts', '.js'],
   },
+  performance: false,
   module: {
     rules: [
       {

package.json

@@ -5,23 +5,23 @@
   "main": "bundles/redoc.lib.js",
   "bin": "bin/cli.js",
   "scripts": {
-    "start": "webpack-dev-server --hot",
+    "start": "webpack-dev-server --mode=development --env.playground --hot --config demo/webpack.config.ts ",
-    "start:benchmark": "webpack-dev-server --env.prod --env.perf",
+    "start:prod": "webpack-dev-server --env.playground --mode=production --config demo/webpack.config.ts",
-    "start:prod": "webpack-dev-server --env.prod",
+    "start:benchmark": "webpack-dev-server --mode=production --env.bench --config demo/webpack.config.ts",
     "test": "npm run lint && npm run unit && npm run e2e",
     "unit": "jest",
     "e2e": "cypress run",
     "cy:open": "cypress open",
     "bundle:clean": "rimraf bundles",
-    "bundle:standalone": "webpack -p --env.lib --env.standalone --env.prod",
+    "bundle:standalone": "webpack --env.standalone --mode=production",
-    "bundle:lib": "webpack --env.lib --env.prod",
+    "bundle:lib": "webpack --mode=production",
     "bundle": "npm run bundle:clean && npm run bundle:lib && npm run bundle:standalone",
-    "stats": "webpack -p --env.lib --env.standalone --env.prod --json --profile > stats.json",
+    "stats": "webpack --env.standalone --json --profile > stats.json",
     "prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",
     "lint": "tslint --project tsconfig.json",
     "benchmark": "node ./benchmark/benchmark.js",
-    "start:demo": "webpack-dev-server --config demo/webpack.config.ts",
+    "start:demo": "webpack-dev-server --hot --config demo/webpack.config.ts",
     "compile:cli": "tsc bin/cli.ts --target es6 --module commonjs --types yargs"
   },
   "author": "",
@@ -30,7 +30,7 @@
     "@babel/core": "^7.0.0-beta.40",
     "@babel/plugin-syntax-decorators": "^7.0.0-beta.42",
     "@babel/plugin-syntax-typescript": "^7.0.0-beta.42",
-    "@cypress/webpack-preprocessor": "^1.1.3",
+    "@cypress/webpack-preprocessor": "RomanGotsiy/cypress-webpack-preprocessor",
     "@types/dompurify": "^0.0.31",
     "@types/enzyme": "^3.1.8",
     "@types/enzyme-to-json": "^1.5.0",
@@ -44,20 +44,20 @@
     "@types/react-dom": "^16.0.0",
     "@types/react-hot-loader": "^3.0.3",
     "@types/react-tabs": "^1.0.2",
-    "@types/webpack": "^3.0.5",
+    "@types/webpack": "^4.1.1",
     "@types/webpack-env": "^1.13.0",
     "@types/yargs": "^11.0.0",
     "babel-loader": "8.0.0-beta.2",
     "beautify-benchmark": "^0.2.4",
     "conventional-changelog-cli": "^1.3.5",
     "core-js": "^2.5.1",
-    "css-loader": "^0.28.7",
+    "css-loader": "^0.28.11",
     "cypress": "~1.4.1",
     "enzyme": "^3.1.1",
     "enzyme-adapter-react-16": "^1.0.4",
     "enzyme-to-json": "^3.2.2",
     "fork-ts-checker-webpack-plugin": "^0.4.1",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.0.6",
     "jest": "^22.1.4",
     "lodash": "^4.17.4",
     "mobx-react-devtools": "^4.2.15",
@@ -70,15 +70,16 @@
     "rimraf": "^2.6.2",
     "shelljs": "^0.8.1",
     "source-map-loader": "^0.2.1",
-    "style-loader": "^0.20.1",
+    "style-loader": "^0.20.3",
     "ts-jest": "^22.0.1",
-    "ts-loader": "3",
+    "ts-loader": "4.1.0",
     "ts-node": "^4.1.0",
     "tslint": "^5.7.0",
     "tslint-react": "^3.4.0",
     "typescript": "^2.8.0-dev.20180316",
-    "webpack": "^3.10.0",
+    "webpack": "^4.1.1",
-    "webpack-dev-server": "^2.9.5",
+    "webpack-cli": "^2.0.12",
+    "webpack-dev-server": "^3.1.1",
     "webpack-node-externals": "^1.6.0",
     "workerize-loader": "^1.0.2",
     "yaml-js": "^0.2.3"
@@ -117,7 +118,8 @@
     "yargs": "^11.0.0"
   },
   "resolutions": {
-    "@types/chai": "4.0.8"
+    "@types/chai": "4.0.8",
+    "@types/tapable": "1.0.0"
   },
   "jest": {
     "transform": {

src/__tests__/ssr.test.tsx

@@ -8,13 +8,10 @@ import { resolve } from 'path';
 
 describe('SSR', () => {
   it('should render in SSR mode', async () => {
-    (global as any).__REDOC_DEV__ = true;
     const spec = yaml.load(readFileSync(resolve(__dirname, '../../demo/openapi.yaml')));
     const store = await createStore(spec, '');
     expect(() => {
       renderToString(<Redoc store={store} />);
     }).not.toThrow();
-
-    delete (global as any).__REDOC_DEV__;
   });
 });

src/services/OpenAPIParser.ts

@@ -122,7 +122,7 @@ export class OpenAPIParser {
    * resets visited enpoints. should be run after
    */
   resetVisited() {
-    if (__REDOC_DEV__) {
+    if (process.env.NODE_ENV !== 'production') {
       // check in dev mode
       for (const k in this._refCounter._counter) {
         if (this._refCounter._counter[k] > 0) {

src/utils/debug.ts

@@ -1,11 +1,11 @@
 export function debugTime(label: string) {
-  if (__REDOC_DEV__) {
+  if (process.env.NODE_ENV !== 'production') {
     console.time(label);
   }
 }
 
 export function debugTimeEnd(label: string) {
-  if (__REDOC_DEV__) {
+  if (process.env.NODE_ENV !== 'production') {
     console.timeEnd(label);
   }
 }

webpack.config.ts

@@ -16,52 +16,13 @@ const REVISION = JSON.stringify(
     .trim(),
 );
 
-export default env => {
+export default (env: { standalone?: boolean } = {}) => ({
-  env = env || {};
+  entry: env.standalone ? ['./src/polyfills.ts', './src/standalone.tsx'] : './src/index.ts',
-
-  let entry;
-
-  if (env.lib) {
-    entry = env.standalone ? ['./src/polyfills.ts', './src/standalone.tsx'] : './src/index.ts';
-  } else {
-    // playground or performance test
-    entry = env.perf
-      ? ['./benchmark/index.tsx'] // perf test
-      : [
-          // playground
-          './src/polyfills.ts',
-          './demo/playground/hmr-playground.tsx',
-        ];
-  }
-
-  const HotReloaderRule = {
-    test: /\.tsx?$/,
-    use: {
-      loader: 'babel-loader',
-      options: {
-        plugins: [
-          '@babel/plugin-syntax-typescript',
-          '@babel/plugin-syntax-decorators',
-          '@babel/plugin-syntax-jsx',
-          'react-hot-loader/babel',
-        ],
-      },
-    },
-  };
-
-  const config: webpack.Configuration = {
-    entry: entry,
   output: {
     filename: env.standalone ? 'redoc.standalone.js' : 'redoc.lib.js',
-      path: __dirname + (env.lib ? '/bundles' : 'lib'),
+    path: path.join(__dirname, '/bundles'),
-    },
+    library: 'Redoc',
-
+    libraryTarget: 'umd',
-    devServer: {
-      contentBase: __dirname + '/demo',
-      host: '0.0.0.0',
-      watchContentBase: true,
-      port: 9090,
-      stats: 'errors-only',
   },
 
   devtool: 'source-map',
@@ -74,9 +35,21 @@ export default env => {
     fs: 'empty',
   },
 
-    externals: {
+  performance: false,
+
+  optimization: {
+    minimize: !!env.standalone,
+  },
+
+  externals: env.standalone
+    ? {
         esprima: 'esprima',
         'node-fetch': 'null',
+      }
+    : (context, request, callback) => {
+        // ignore node-fetch dep of swagger2openapi as it is not used
+        if (/node-fetch$/i.test(request)) return callback(null, 'var undefined');
+        return nodeExternals(context, request, callback);
       },
 
   module: {
@@ -87,7 +60,7 @@ export default env => {
           loader: 'ts-loader',
           options: {
             compilerOptions: {
-                module: env.perf ? 'esnext' : 'es2015',
+              module: 'es2015',
             },
           },
         },
@@ -121,40 +94,9 @@ export default env => {
   },
   plugins: [
     new webpack.DefinePlugin({
-        'process.env.NODE_ENV': env.prod ? '"production"' : '"development"',
       __REDOC_VERSION__: VERSION,
       __REDOC_REVISION__: REVISION,
-        __REDOC_DEV__: env.prod ? 'false' : 'true',
     }),
-      new webpack.NamedModulesPlugin(),
     new ForkTsCheckerWebpackPlugin(),
   ],
-  };
+});
-
-  if (env.prod) {
-    config.plugins!.push(new webpack.optimize.ModuleConcatenationPlugin());
-  } else {
-    (config.module as webpack.NewModule).rules.push(HotReloaderRule);
-  }
-
-  if (env.lib) {
-    config.output!.library = 'Redoc';
-    config.output!.libraryTarget = 'umd';
-
-    if (!env.standalone) {
-      config.externals = (context, request, callback) => {
-        // ignore node-fetch dep of swagger2openapi as it is not used
-        if (/node-fetch$/i.test(request)) return callback(null, 'var undefined');
-        return nodeExternals(context, request, callback);
-      };
-    }
-  } else {
-    config.plugins!.push(
-      new HtmlWebpackPlugin({
-        template: env.perf ? './benchmark/index.html' : './demo/playground/index.html',
-      }),
-    );
-  }
-
-  return config;
-};