webpack dev 配置完毕

package.json

@@ -34,10 +34,12 @@
     "chai": "^4.2.0",
     "chokidar": "^2.1.5",
     "csso": "^3.5.1",
+    "html-webpack-plugin": "^3.2.0",
     "imagemin": "^6.1.0",
     "imagemin-mozjpeg": "^8.0.0",
     "imagemin-pngquant": "^7.0.0",
     "imagemin-svgo": "^7.0.0",
+    "koa-webpack": "^5.2.2",
     "less": "^3.9.0",
     "lodash": "^4.17.11",
     "mocha": "^6.1.4",
@@ -47,14 +49,17 @@
     "react": "^16.8.6",
     "scss-bundle": "^2.5.1",
     "stylus": "^0.54.5",
+    "ts-loader": "^5.4.4",
     "ts-node": "^8.1.0",
     "tsconfig-paths": "^3.8.0",
+    "tsconfig-paths-webpack-plugin": "^3.2.0",
     "tsickle": "^0.34.3",
     "tslib": "^1.9.3",
     "typescript": "^3.4.4",
     "uglify-js": "^3.5.8",
     "webpack": "^4.30.0",
     "webpack-dev-middleware": "^3.6.2",
+    "webpack-hot-client": "^4.1.1",
     "webpack-koa2-middleware": "^2.1.0",
     "yargs": "^13.2.2"
   },

packages/nger-module-webpack/lib/index.ts

@@ -15,9 +15,11 @@ const root = process.cwd();
             useValue: {
                 mode: 'development',
                 entry: join(root, 'src/admin.ts'),
-                output: {
-                    path: join(root, 'template/admin'),
-                    filename: `[name].js`
+                resolve: {
+                    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+                    mainFields: ['main:h5', 'main', 'module'],
+                    symlinks: true,
+                    modules: [join(root, 'packages'), join(root, 'node_modules')]
                 },
                 plugins: []
             } as Configuration,

packages/nger-module-webpack/lib/providers/webpack.ts

@@ -17,14 +17,16 @@ export class WebpackService {
 
     configs: Configuration[];
     get compiler(): Compiler {
+        return webpack(this.config)
+    }
+    get config(): Configuration {
         this.configs = this.injector.get(WebpackConfigToken) as Configuration[];
         if (this.configs.length > 1) {
-            const config = this.merge.merge(...this.configs)
-            return webpack(config)
+            return this.merge.merge(...this.configs)
         } else if (this.configs.length === 1) {
-            return webpack(this.configs[0])
+            return this.configs[0]
         }
-        return webpack({})
+        return {}
     }
 
     /** 运行 */

packages/nger-platform-koa/lib/index.ts

@@ -1,4 +1,3 @@
-import { TypeContext } from 'ims-decorator';
 import { createServer } from 'http';
 import { Injector, InjectFlags } from 'nger-di'
 import Koa from 'koa';
@@ -8,9 +7,11 @@ import { NgerUtil } from 'nger-util';
 import Router from 'koa-router';
 import Static from 'koa-static';
 import { NgModuleMetadataKey, NgModuleClassAst, ControllerMetadataKey, ControllerClassAst, GetMethodAst, PostMethodAst, GetMetadataKey, PostMetadataKey, Platform, GetPropertyAst } from 'nger-core';
-import { join } from 'path';
+import { join, resolve } from 'path';
 import { NgerPlatformAxios } from 'nger-platform-axios'
-import webpackKoa2Middleware from 'webpack-koa2-middleware'
+
+// import webpackKoa2Middleware from 'webpack-koa2-middleware'
+import koaWebpack from 'koa-webpack';
 import { WebpackService } from 'nger-module-webpack';
 export class NgerPlatformKoa extends Platform {
     logger: ConsoleLogger;
@@ -80,18 +81,40 @@ export class NgerPlatformKoa extends Platform {
                 })
             });
         });
+        this.attachWebpackCompiler(router);
         this.app.use(router.routes()).use(router.allowedMethods())
-        this.attachWebpackCompiler();
         server.listen(port, () => {
             this.logger.info(`app start at http://localhost:${port}`)
         });
     }
 
-    attachWebpackCompiler() {
-        const compiler = this.injector.get(WebpackService, undefined, InjectFlags.Optional) as WebpackService;
+    async attachWebpackCompiler(router: any) {
+        const webpack = this.injector.get(WebpackService, undefined, InjectFlags.Optional) as WebpackService;
+        const config = webpack.config;
         const dev = this.injector.get(DevModelToken, false);
-        if (dev && !!compiler) {
-            this.app.use(webpackKoa2Middleware(compiler.compiler));
+        if (dev && !!webpack) {
+            const middleware = await koaWebpack({
+                config,
+                devMiddleware: {
+                    publicPath: config.output && config.output.publicPath || '/',
+                    logLevel: 'silent',
+                    watchOptions: { aggregateTimeout: 200 }
+                },
+                hotClient: {
+                    logLevel: 'silent'
+                },
+                compiler: webpack.compiler
+            });
+            this.app.use(middleware);
+            this.app.use(async (ctx, next) => {
+                if (config.output) {
+                    const filename = resolve(config.output.path || '', 'index.html')
+                    ctx.response.type = 'html'
+                    ctx.response.body = middleware.devMiddleware.fileSystem.createReadStream(filename)
+                } else {
+                    next();
+                }
+            });
         }
     }
 }

packages/nger-webpack-admin/lib/index.ts

@@ -1,4 +1,79 @@
 import { NgModule } from 'nger-core'
+import { WebpackConfigToken } from 'nger-module-webpack';
+import HtmlWebpackPlugin = require('html-webpack-plugin');
+import webpack, { Configuration } from 'webpack'
+import { join } from 'path';
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const root = process.cwd();
+@NgModule({
+    providers: [{
+        provide: WebpackConfigToken,
+        useValue: {
+            entry: {
+                main: [join(root, 'src/admin.ts')]
+            },
+            devtool: 'inline-source-map',
+            watch: true,
+            resolve: {
+                plugins: [new TsconfigPathsPlugin({ configFile: 'tsconfig.json' })]
+            },
+            plugins: [
+                new HtmlWebpackPlugin({
+                    template: join(root, 'template/admin/index.html'),
+                    filename: 'index.html',
+                    chunks: [
+                        'manifest'
+                    ]
+                }),
+                new webpack.WatchIgnorePlugin([
+                    /\.js$/,
+                    /\.d\.ts$/
+                ]),
+            ],
+            output: {
+                path: join(root, 'attachments/template/admin'),
+                publicPath: `/attachments/template/admin/`,
+                filename: '[name]_[hash].bound.js',
+                chunkFilename: '[name]_[hash].chunk.js'
+            },
+            module: {
+                rules: [{
+                    test: /\.tsx?$/,
+                    enforce: 'pre',
+                    use: [
+                        {
+                            loader: 'ts-loader',
+                            options: {
+                                transpileOnly: true,
+                                configFile: 'tsconfig.json'
+                            }
+                        }
+                    ]
 
-@NgModule()
+                }]
+            },
+            performance: {
+                hints: 'warning',
+                maxEntrypointSize: 1700000,
+                maxAssetSize: 1700000
+            },
+            optimization: {
+                runtimeChunk: {
+                    name: 'manifest'
+                },
+                splitChunks: {
+                    cacheGroups: {
+                        vendor: {
+                            test: /[\\/]node_modules[\\/]/,
+                            name: "vendors",
+                            priority: -20,
+                            chunks: "all"
+                        }
+                    }
+                }
+            }
+        } as Configuration,
+        multi: true
+    }]
+})
 export class NgerWebpackAdmin { }

src/server.ts

@@ -11,6 +11,7 @@ import { CounterEffects } from './store/counter.effects'
 
 import { EffectsModule } from 'nger-effects';
 import { Injector } from 'nger-di';
+import { NgerWebpackAdmin } from 'packages/nger-webpack-admin/lib';
 /** api服务 */
 @NgModule({
     declarations: [
@@ -25,6 +26,7 @@ import { Injector } from 'nger-di';
     imports: [
         NgerModulePm2,
         NgerModuleWebpack,
+        NgerWebpackAdmin,
         NgerModuleTypeorm.forRoot(NgerRunnerTypeorm),
         StoreModule.forRoot({ count: counterReducer }),
         EffectsModule.forRoot([CounterEffects])

template/admin/index.html

@@ -1,13 +1,12 @@
-<html>
-
+<!DOCTYPE html>
+<html lang="en">
 <head>
-    <title>nger admin</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
 </head>
-
 <body>
-    <div id="root">
-        welcome to use nger admin!
-    </div>
+
 </body>
-
 </html>

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "es6",
     "module": "commonjs",
     "lib": [
       "dom",