webpack-dev-service 0.1.1 → 0.1.2

package/README.md

@@ -11,12 +11,35 @@
 ### Usage
 
 ```js
+/**
+ * @module webpack
+ * @description Webpack config
+ */
+
 import Koa from 'koa';
 import path from 'path';
 import memfs from 'memfs';
 import webpack from 'webpack';
-import koaCompress from 'koa-compress';
-import devMiddleware from 'webpack-dev-service';
+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();
@@ -31,12 +54,118 @@ function httpError(error) {
   return /^(EOF|EPIPE|ECANCELED|ECONNRESET|ECONNABORTED)$/i.test(error.code);
 }
 
-const app = new Koa();
-const fs = createMemfs();
 const compiler = webpack({
-  // Your webpack config
+  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',
@@ -50,29 +179,20 @@ app.use(async (ctx, next) => {
   await next();
 });
 
-app.use(koaCompress({ br: false }));
-
-const devServer = devMiddleware(compiler, {
-  index: false,
-  outputFileSystem: fs
-});
-
-app.use(devServer);
+app.use(server);
 
 app.use(async ctx => {
   ctx.type = 'text/html; charset=utf-8';
-  ctx.body = fs.createReadStream('index.html');
+  ctx.body = fs.createReadStream(entryHTML);
 });
 
 app.on('error', error => {
   !httpError(error) && console.error(error);
 });
 
-app.listen(8000, () => {
-  devServer.waitUntilValid(() => {
-    const { logger } = devServer.context;
-
-    logger.info(`server run at: \u001B[36mhttp://127.0.0.1:8000\u001B[0m`);
+app.listen(port, () => {
+  server.waitUntilValid(() => {
+    logger.info(`server run at: \u001B[36mhttp://127.0.0.1:${port}\u001B[0m`);
   });
 });
 ```

package/client/cjs/client.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1",
+  "version": "0.1.2",
   "description": "A koa 2 middleware for webpack development and hot reloading.",
   "type": "module",
   "sideEffects": [

package/server/cjs/dev.cjs

@@ -1,7 +1,7 @@
 /**
  * @package webpack-dev-service
  * @license MIT
- * @version 0.1.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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.1
+ * @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