feat(docz-core): webpack middlewares

doczjs · Apr 15, 2018 · 68cbcba · 68cbcba
1 parent d2e74ee
commit 68cbcba
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 456 deletions.
diff --git a/packages/playgrodd-core/package.json b/packages/playgrodd-core/package.json
@@ -23,21 +23,23 @@
     "babylon": "^6.18.0",
     "connect-history-api-fallback": "^1.5.0",
     "del": "^3.0.0",
+    "express": "^4.16.3",
     "fast-glob": "^2.2.0",
     "html-webpack-plugin": "^3.1.0",
     "mkdirp": "^0.5.1",
     "webpack": "^4.2.0",
-    "webpack-dev-server": "^3.1.1",
+    "webpack-dev-middleware": "^3.0.1",
     "webpack-hot-middleware": "^2.21.2"
   },
   "devDependencies": {
     "@types/babel-traverse": "^6.25.3",
     "@types/babylon": "^6.16.2",
     "@types/connect-history-api-fallback": "^1.3.1",
     "@types/del": "^3.0.0",
+    "@types/express": "^4.11.1",
     "@types/mkdirp": "^0.5.2",
     "@types/webpack": "^4.1.2",
-    "@types/webpack-dev-server": "^2.9.4",
+    "@types/webpack-dev-middleware": "^2.0.1",
     "@types/webpack-hot-middleware": "^2.16.3"
   }
 }
diff --git a/packages/playgrodd-core/src/compiler/create-config.ts b/packages/playgrodd-core/src/compiler/create-config.ts
@@ -2,6 +2,7 @@ import * as fs from 'fs'
 import * as path from 'path'
 import * as findup from 'find-up'
 import { Loader, Configuration } from 'webpack'
+import * as webpack from 'webpack'
 import * as HtmlWebpackPlugin from 'html-webpack-plugin'
 
 import { IEntryObj } from './files-parser'
@@ -27,13 +28,15 @@ export const createConfig = async (
   const babelrcPath = findup.sync(['.babelrc', 'babelrc.js'])
   const babelrc = babelrcPath ? fs.readFileSync(babelrcPath, 'utf-8') : null
 
-  console.log(entries)
-
   return {
     mode: 'development',
     context: paths.ROOT,
+    devtool: '#source-map',
     entry: [
       require.resolve('babel-polyfill'),
+      `${require.resolve(
+        'webpack-hot-middleware/client'
+      )}?path=/__webpack_hmr&timeout=20000'`,
       ...entries.map(entry => entry.filepath),
       paths.INDEX_JS,
     ],
@@ -60,11 +63,12 @@ export const createConfig = async (
     resolve: {
       extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
       modules: [paths.ROOT, 'node_modules'],
-      alias: {
-        src: path.join(paths.ROOT, 'src'),
-      },
+      alias: { src: path.join(paths.ROOT, 'src') },
     },
     plugins: [
+      new webpack.NamedModulesPlugin(),
+      new webpack.HotModuleReplacementPlugin(),
+      new webpack.NoEmitOnErrorsPlugin(),
       new HtmlWebpackPlugin({
         template: paths.INDEX_HTML,
       }),

diff --git a/packages/playgrodd-core/src/server.ts b/packages/playgrodd-core/src/server.ts
@@ -1,44 +1,31 @@
 import { Arguments } from 'yargs'
-import * as historyApiFallback from 'connect-history-api-fallback'
+import * as express from 'express'
 import * as hotMiddleware from 'webpack-hot-middleware'
-import * as WebpackDevServer from 'webpack-dev-server'
+import * as devServerMiddleware from 'webpack-dev-middleware'
+import * as historyApiFallback from 'connect-history-api-fallback'
 
 import { entriesMapper } from './compiler'
 import { createCompiler } from './compiler'
-import * as paths from './config/paths'
-
-const PROTOCOL = process.env.HTTPS === 'true' ? 'https' : 'http'
-const HOST = process.env.HOST || '0.0.0.0'
 
 export const server = async ({ files: pattern }: Arguments) => {
+  const app = express()
   const entries = await entriesMapper(pattern)
   const compiler = await createCompiler(entries)
 
-  const app = new WebpackDevServer(compiler, {
-    compress: true,
-    clientLogLevel: 'none',
-    contentBase: paths.DIST,
-    watchContentBase: true,
+  const opts = {
     publicPath: '/',
-    hot: true,
-    quiet: true,
-    noInfo: true,
-    https: PROTOCOL === 'https',
-    host: HOST,
-    overlay: false,
+    logLevel: 'warn',
     watchOptions: {
       ignored: /node_modules/,
     },
-    stats: {
-      colors: true,
-      chunks: false,
-      chunkModules: false,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
     },
-    before(app: any) {
-      app.use(historyApiFallback())
-      app.use(hotMiddleware(compiler, { log: false, heartbeat: 2000 }))
-    },
-  })
+  }
+
+  app.use(historyApiFallback())
+  app.use(devServerMiddleware(compiler, opts))
+  app.use(hotMiddleware(compiler, { log: false, heartbeat: 2000 }))
 
   app.listen(3000, () => {
     console.log('Example app listening on port 3000!')

diff --git a/packages/playgrodd-core/tsconfig.json b/packages/playgrodd-core/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "target": "es2017",
     "module": "commonjs",
+
     "outDir": "dist/main",
     "rootDir": "src",
     "types": ["node"],