webpack-dev-service 0.1.0 → 0.1.2

package/README.md

@@ -8,6 +8,195 @@
 > [![Snyk Vulnerabilities][snyk-image]][snyk-url]
 > [![License][license-image]][license-url]
 
+### Usage
+
+```js
+/**
+ * @module webpack
+ * @description Webpack config
+ */
+
+import Koa from 'koa';
+import path from 'path';
+import memfs from 'memfs';
+import webpack from 'webpack';
+import dev from 'webpack-dev-service';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+
+const progress = {
+  percentBy: 'entries'
+};
+
+const entryHTML = path.resolve('public/index.html');
+
+const html = {
+  xhtml: true,
+  minify: false,
+  title: 'React',
+  filename: entryHTML,
+  templateParameters: { lang: 'en' },
+  template: path.resolve('index.ejs'),
+  favicon: path.resolve('src/logo.svg'),
+  meta: { 'theme-color': '#4285f4', viewport: 'width=device-width,initial-scale=1.0' }
+};
+
+function createMemfs() {
+  const volume = new memfs.Volume();
+  const fs = memfs.createFsFromVolume(volume);
+
+  fs.join = path.join.bind(path);
+
+  return fs;
+}
+
+function httpError(error) {
+  return /^(EOF|EPIPE|ECANCELED|ECONNRESET|ECONNABORTED)$/i.test(error.code);
+}
+
+const compiler = webpack({
+  name: 'react',
+  mode: 'development',
+  context: path.resolve('src'),
+  entry: [
+    // Entry file
+    path.resolve('src/index.jsx'),
+    // Hot client
+    'webpack-dev-service/client'
+  ],
+  output: {
+    publicPath: '/public/',
+    filename: `js/[name].js`,
+    hashFunction: 'xxhash64',
+    path: path.resolve('public'),
+    chunkFilename: `js/[name].js`,
+    assetModuleFilename: `[path][name][ext]`
+  },
+  devtool: 'eval-cheap-module-source-map',
+  resolve: {
+    fallback: { url: false },
+    extensions: ['.js', '.jsx']
+  },
+  watchOptions: {
+    aggregateTimeout: 256
+  },
+  stats: {
+    colors: true,
+    chunks: false,
+    children: false,
+    entrypoints: false,
+    runtimeModules: false,
+    dependentModules: false
+  },
+  module: {
+    strictExportPresence: true,
+    rules: [
+      {
+        oneOf: [
+          {
+            test: /\.jsx?$/i,
+            exclude: /[\\/]node_modules[\\/]/,
+            use: [
+              {
+                loader: 'swc-loader',
+                options: {
+                  swcrc: false,
+                  jsc: {
+                    parser: {
+                      tsx: true,
+                      syntax: 'typescript'
+                    },
+                    transform: {
+                      react: {
+                        runtime: 'automatic'
+                      }
+                    },
+                    externalHelpers: true
+                  },
+                  env: {
+                    targets: ['defaults', 'not IE >= 0']
+                  }
+                }
+              }
+            ]
+          },
+          {
+            test: /\.css$/i,
+            exclude: /[\\/]node_modules[\\/]/,
+            use: [
+              {
+                loader: MiniCssExtractPlugin.loader
+              },
+              {
+                loader: 'css-loader',
+                options: {
+                  esModule: true,
+                  modules: {
+                    auto: true,
+                    localIdentName: '[local]-[hash:8]',
+                    exportLocalsConvention: 'camelCaseOnly'
+                  }
+                }
+              }
+            ]
+          },
+          {
+            test: /\.svg$/i,
+            type: 'asset/resource',
+            exclude: /[\\/]node_modules[\\/]/
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new webpack.ProgressPlugin(progress),
+    new HtmlWebpackPlugin(html),
+    new MiniCssExtractPlugin({
+      ignoreOrder: true,
+      filename: 'css/[name].css',
+      chunkFilename: 'css/[name].css'
+    })
+  ]
+});
+
+const port = 8000;
+const app = new Koa();
+const fs = createMemfs();
+const server = dev(compiler, { index: false, outputFileSystem: fs });
+const logger = compiler.getInfrastructureLogger('webpack-dev-middleware');
+
+app.use(async (ctx, next) => {
+  ctx.set({
+    'Cache-Control': 'no-store',
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': '*',
+    'Access-Control-Allow-Headers': '*',
+    'X-Content-Type-Options': 'nosniff',
+    'Access-Control-Allow-Credentials': 'true'
+  });
+
+  await next();
+});
+
+app.use(server);
+
+app.use(async ctx => {
+  ctx.type = 'text/html; charset=utf-8';
+  ctx.body = fs.createReadStream(entryHTML);
+});
+
+app.on('error', error => {
+  !httpError(error) && console.error(error);
+});
+
+app.listen(port, () => {
+  server.waitUntilValid(() => {
+    logger.info(`server run at: \u001B[36mhttp://127.0.0.1:${port}\u001B[0m`);
+  });
+});
+```
+
 [npm-image]: https://img.shields.io/npm/v/webpack-dev-service?style=flat-square
 [npm-url]: https://www.npmjs.org/package/webpack-dev-service
 [download-image]: https://img.shields.io/npm/dm/webpack-dev-service?style=flat-square

package/client/cjs/client.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/events.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/hot.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/index.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/main.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/ui/overlay.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/ui/progress.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/ui/utils/ansi/index.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/ui/utils/ansi/regx.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/ui/utils/ansi/utils.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/cjs/ui/utils/index.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/client.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/events.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/hot.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/index.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/main.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/ui/overlay.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/ui/progress.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/ui/utils/ansi/index.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/ui/utils/ansi/regx.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/ui/utils/ansi/utils.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/client/esm/ui/utils/index.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-dev-service",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A koa 2 middleware for webpack development and hot reloading.",
   "type": "module",
   "sideEffects": [
@@ -37,6 +37,9 @@
       "client": [
         "./types/client/main.d.ts"
       ],
+      "client?*": [
+        "./types/client/main.d.ts"
+      ],
       "events": [
         "./types/client/index.d.ts"
       ]
@@ -95,7 +98,7 @@
     "@swc/core": "^1.3.57",
     "@swc/helpers": "^0.5.1",
     "@types/koa-compose": "^3.2.5",
-    "@types/node": "^20.1.2",
+    "@types/node": "^20.1.3",
     "css-loader": "^6.7.3",
     "html-webpack-plugin": "^5.5.1",
     "koa": "^2.14.2",

package/server/cjs/dev.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/server/cjs/hot.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/server/cjs/index.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/server/esm/dev.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/server/esm/hot.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme

package/server/esm/index.js

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.0
+ * @version 0.1.2
  * @author nuintun <nuintun@qq.com>
  * @description A koa 2 middleware for webpack development and hot reloading.
  * @see https://github.com/nuintun/webpack-dev-service#readme