chore(docz-core): refac webpack bundler

packages/playgrodd-core/package.json

@@ -47,6 +47,7 @@
     "@types/mkdirp": "^0.5.2",
     "@types/webpack": "^4.1.3",
     "@types/webpack-dev-server": "^2.9.4",
+    "@types/html-webpack-plugin": "^2.30.3",
     "shelljs": "^0.8.1"
   }
 }

packages/playgrodd-core/src/bundlers/webpack.ts → packages/playgrodd-core/src/bundlers/webpack/config-dev.ts

@@ -1,53 +1,21 @@
-import * as errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware'
 import * as path from 'path'
-import { Application } from 'express'
 import { Loader, Configuration } from 'webpack'
 import * as webpack from 'webpack'
-import * as merge from 'deepmerge'
 import * as HtmlWebpackPlugin from 'html-webpack-plugin'
 import * as webpackDevServerUtils from 'react-dev-utils/WebpackDevServerUtils'
 import * as WebpackDevServer from 'webpack-dev-server'
+import * as merge from 'deepmerge'
+import { load } from 'load-cfg'
 
-import { loadConfig } from '../utils/load-config'
-import * as paths from '../config/paths'
+import * as paths from '../../config/paths'
+import { Entry } from '../../Entry'
 
-import { Bundler } from '../Bundler'
-import { Entry } from '../Entry'
+import { devServerConfig } from './config-devserver'
 
-export const PORT = 3000
-export const PROTOCOL = process.env.HTTPS === 'true' ? 'https' : 'http'
-export const HOST = process.env.HOST || '0.0.0.0'
-
-const devServerConfig = () => ({
-  compress: true,
-  clientLogLevel: 'none',
-  contentBase: paths.PLAYGRODD,
-  watchContentBase: true,
-  hot: true,
-  quiet: true,
-  noInfo: true,
-  publicPath: '/',
-  https: PROTOCOL === 'https',
-  host: HOST,
-  overlay: false,
-  watchOptions: {
-    ignored: /node_modules/,
-  },
-  stats: {
-    colors: true,
-    chunks: false,
-    chunkModules: false,
-  },
-  historyApiFallback: {
-    disableDotRule: true,
-  },
-  before(app: Application) {
-    app.use(errorOverlayMiddleware())
-  },
-})
+const HOST = process.env.HOST || '0.0.0.0'
 
 const babelLoader = (): Loader => {
-  const babelrc = loadConfig('babel', null)
+  const babelrc = load('babel', null)
   const options = merge(babelrc, {
     babelrc: false,
     cacheDirectory: true,
@@ -64,7 +32,7 @@ const babelLoader = (): Loader => {
   }
 }
 
-const config = (entries: Entry[]): Configuration => ({
+export const config = (entries: Entry[]): Configuration => ({
   mode: 'development',
   context: paths.ROOT,
   devtool: '#source-map',
@@ -116,10 +84,10 @@ const config = (entries: Entry[]): Configuration => ({
   ],
 })
 
-const setup = (config: Configuration) => {
+export const setup = (port: number) => (config: Configuration) => {
   const appName = require(paths.PACKAGE_JSON).name
   const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'
-  const urls = webpackDevServerUtils.prepareUrls(protocol, HOST, PORT)
+  const urls = webpackDevServerUtils.prepareUrls(protocol, HOST, port)
 
   return webpackDevServerUtils.createCompiler(
     webpack,
@@ -130,13 +98,5 @@ const setup = (config: Configuration) => {
   )
 }
 
-const server = (compiler: any): WebpackDevServer =>
+export const server = (compiler: any): WebpackDevServer =>
   new WebpackDevServer(compiler, devServerConfig())
-
-export const bundler = (): Bundler =>
-  new Bundler<Configuration, WebpackDevServer>({
-    id: 'webpack',
-    config,
-    setup,
-    server,
-  })

packages/playgrodd-core/src/bundlers/webpack/config-devserver.ts

@@ -0,0 +1,35 @@
+import { Application } from 'express'
+import * as errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware'
+
+import * as paths from '../../config/paths'
+
+export const PROTOCOL = process.env.HTTPS === 'true' ? 'https' : 'http'
+export const HOST = process.env.HOST || '0.0.0.0'
+
+export const devServerConfig = () => ({
+  compress: true,
+  clientLogLevel: 'none',
+  contentBase: paths.PLAYGRODD,
+  watchContentBase: true,
+  hot: true,
+  quiet: true,
+  noInfo: true,
+  publicPath: '/',
+  https: PROTOCOL === 'https',
+  host: HOST,
+  overlay: false,
+  watchOptions: {
+    ignored: /node_modules/,
+  },
+  stats: {
+    colors: true,
+    chunks: false,
+    chunkModules: false,
+  },
+  historyApiFallback: {
+    disableDotRule: true,
+  },
+  before(app: Application) {
+    app.use(errorOverlayMiddleware())
+  },
+})

packages/playgrodd-core/src/bundlers/webpack/index.ts

@@ -0,0 +1,17 @@
+import { Configuration } from 'webpack'
+import * as WebpackDevServer from 'webpack-dev-server'
+
+import { Bundler } from '../../Bundler'
+import { config, setup, server } from './config-dev'
+
+interface IBundlerParams {
+  port: number
+}
+
+export const bundler = ({ port }: IBundlerParams): Bundler =>
+  new Bundler<Configuration, WebpackDevServer>({
+    id: 'webpack',
+    config,
+    server,
+    setup: setup(port),
+  })

packages/playgrodd-core/src/server.ts

@@ -15,8 +15,8 @@ export class Server {
 
   constructor({ port, bundler, files: pattern }: IConstructorParams) {
     this.port = port
-    this.bundler = prop(bundler, bundlers)()
     this.entries = new Entries(pattern)
+    this.bundler = prop(bundler, bundlers)({ port })
   }
 
   public async start() {

yarn.lock

@@ -751,6 +751,10 @@
     "@types/express" "*"
     "@types/node" "*"
 
+"@types/clean-css@*":
+  version "3.4.30"
+  resolved "https://registry.npmjs.org/@types/clean-css/-/clean-css-3.4.30.tgz#0052c136f5248002428e3638b37de4a39818641d"
+
 "@types/connect@*":
   version "3.4.31"
   resolved "https://registry.npmjs.org/@types/connect/-/connect-3.4.31.tgz#1f92d6b117ecc05076c49ecd024f7976e528bad9"
@@ -806,6 +810,21 @@
   version "4.6.2"
   resolved "https://registry.npmjs.org/@types/history/-/history-4.6.2.tgz#12cfaba693ba20f114ed5765467ff25fdf67ddb0"
 
+"@types/html-minifier@*":
+  version "3.5.2"
+  resolved "https://registry.npmjs.org/@types/html-minifier/-/html-minifier-3.5.2.tgz#f897a13d847a774e9b6fd91497e9b0e0ead71c35"
+  dependencies:
+    "@types/clean-css" "*"
+    "@types/relateurl" "*"
+    "@types/uglify-js" "*"
+
+"@types/html-webpack-plugin@^2.30.3":
+  version "2.30.3"
+  resolved "https://registry.npmjs.org/@types/html-webpack-plugin/-/html-webpack-plugin-2.30.3.tgz#848baba8e35010c6ef6d36b04174820b9d884583"
+  dependencies:
+    "@types/html-minifier" "*"
+    "@types/webpack" "*"
+
 "@types/http-proxy-middleware@*":
   version "0.17.4"
   resolved "https://registry.npmjs.org/@types/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#788bd64270c8c1a0e67e6e7d8131dcf852fff3cb"
@@ -875,6 +894,10 @@
   dependencies:
     csstype "^2.0.0"
 
+"@types/relateurl@*":
+  version "0.2.28"
+  resolved "https://registry.npmjs.org/@types/relateurl/-/relateurl-0.2.28.tgz#6bda7db8653fa62643f5ee69e9f69c11a392e3a6"
+
 "@types/serve-static@*":
   version "1.13.1"
   resolved "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.1.tgz#1d2801fa635d274cd97d4ec07e26b21b44127492"