Add to git

.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+package-lock.json
+/dist

.vscode/launch.json

@@ -0,0 +1,32 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "1. Run NPM install (first time run)",
+            "program": "${workspaceFolder}/BuildScripts/npm-install.js"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "2. Start webpack server (w. hot)",
+            "program": "${workspaceFolder}/BuildScripts/webpack-server.js"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "3. Re-open localhost (if webpack server already running)",
+            "program": "${workspaceFolder}/BuildScripts/open-localhost.js"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "4. Publish",
+            "program": "${workspaceFolder}/BuildScripts/publish.js"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+}

BuildScripts/npm-install.js

@@ -0,0 +1,13 @@
+var exec = require('child_process').exec;
+
+console.log("Installing NPM packages");
+
+exec('npm install',
+    function (error, stdout, stderr) {
+        if (error !== null) {
+            console.error("ERROR installing NPM packages", error);
+        }
+        else {
+            console.error("Successfully installed NPM packages", stdout, stderr);
+        }
+    });

BuildScripts/open-localhost.js

@@ -0,0 +1,3 @@
+var open = require("open");
+  
+open("http://localhost:8080");

BuildScripts/publish.js

@@ -0,0 +1,20 @@
+var npm = require("npm");
+var open = require("open");
+
+npm.load(function(err) {
+npm.commands.run(['webpack-production'], function(er, data) {
+    // log errors or data
+    if (er){
+      console.error(er);
+    }
+
+    if (data) {
+      console.log("Publish done!");
+    }
+  });
+
+  npm.on('log', function(message) {
+    // log installation progress
+    console.log(message);
+  });
+});

BuildScripts/webpack-server.js

@@ -0,0 +1,17 @@
+var npm = require("npm");
+var open = require("open");
+
+npm.load(function(err) {
+npm.commands.run(['webpack-dev-server'], function(er, data) {
+    // log errors or data
+    if (er){
+      console.error(er);
+    }
+  });
+
+  open("http://localhost:8080");
+  npm.on('log', function(message) {
+    // log installation progress
+    console.log(message);
+  });
+});

Web.config

@@ -0,0 +1,24 @@
+<!--web.config url rewrite-->
+<configuration> 
+  <system.webServer>
+      <rewrite>
+          <rules>
+              <rule name="Redirect to https" stopProcessing="true">
+                    <match url=".*" />
+                    <conditions>
+                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
+                    </conditions>
+                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
+              </rule>
+              <rule name="Redirect To Index" stopProcessing="true">
+                  <match url=".*" />
+                  <conditions>
+                      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
+                      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
+                  </conditions>
+                  <action type="Rewrite" url="/index.html" />
+              </rule>
+          </rules>
+      </rewrite>
+  </system.webServer>
+</configuration>

app/boot.html

@@ -0,0 +1,3 @@
+<div>
+    my app-root html here!
+</div>

app/boot.less

@@ -0,0 +1,8 @@
+html, body {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    background: rgb(179, 179, 179);
+    margin: 0;
+    overflow: hidden;
+}

app/boot.ts

@@ -0,0 +1,6 @@
+require("./boot.less");
+var bootHtml = require("./boot.html");
+var appEle = document.createElement("app-root");
+appEle.innerHTML = bootHtml;
+
+document.body.appendChild(appEle);

index.html

@@ -0,0 +1,23 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" id="master-viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="Title">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <title>Title</title>
+
+    <link rel="apple-touch-icon" href="logo.png">
+    <link rel="apple-touch-startup-image" href='splash.png'>
+
+    <link rel="manifest" href="manifest.json?v=1">
+    
+    <base href="/" />
+</head>
+
+<body>
+    <script type="text/javascript" src="/main.js?v=1"></script>
+</body>
+
+</html>

manifest.json

@@ -0,0 +1,16 @@
+{
+  "short_name": "ShortName",
+  "name": "AppName",
+  "icons": [
+    {
+      "src": "logo.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    }
+  ],
+  "display": "fullscreen",
+  "orientation": "portrait",
+  "background_color": "#252831",
+  "theme_color": "#0094ff",
+  "start_url": "/?webapp=true"
+}

package.json

@@ -0,0 +1,33 @@
+{
+  "version": "0.0.1",
+  "name": "new-webpack",
+  "description": "new-webpack",
+  "license": "0BSD",
+  "repository": {},
+  "scripts": {
+    "webpack-error-details": "webpack --display-error-details",
+    "webpack-development": "webpack --display-error-details --mode development",
+    "webpack-production": "webpack --display-error-details --mode production",
+    "webpack-dev-server": "webpack-dev-server"
+  },
+  "devDependencies": {
+    "@types/webpack-env": "1.13.6",
+    "copy-webpack-plugin": "4.5.1",
+    "css-loader": "0.28.11",
+    "file-loader": "1.1.11",
+    "gulp": "3.9.1",
+    "html-loader": "0.5.5",
+    "less": "3.0.2",
+    "less-loader": "4.1.0",
+    "npm": "6.0.0",
+    "open": "0.0.5",
+    "replace-in-file-webpack-plugin": "1.0.5",
+    "style-loader": "0.21.0",
+    "ts-loader": "4.2.0",
+    "typescript": "2.8.3",
+    "webpack": "4.6.0",
+    "webpack-cli": "2.0.15",
+    "webpack-dev-server": "3.1.3",
+    "webpack-merge": "4.1.2"
+  }
+}

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {    
+    "target": "es6",
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "lib": [ "es6", "dom" ],
+    "types": [ "webpack-env" ],
+    "allowJs": true
+  },
+  "exclude": [ "bin", "node_modules" ],
+  "atom": { "rewriteTsconfig": false }
+}

webpack.config.js

@@ -0,0 +1,105 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
+
+
+module.exports = (env, argv) => {
+
+    var isDevServer = argv.mode === undefined;
+
+    if (isDevServer && __dirname.indexOf(" ") !== -1) {
+        throw new Error("Space in __dirname not allowed: " + __dirname);
+    }
+
+    const sharedSettings = {
+        entry: {
+            'main': path.resolve(__dirname, 'App', 'boot.ts')
+        },
+        resolve: {
+            extensions: [".ts", ".js", ".json"]
+        },
+        module: {
+            rules: [
+                {
+                    //ts to js
+                    test: /\.ts$/,
+                    use: 'ts-loader'
+                },
+                {
+                    //html to js
+                    test: /\.html$/,
+                    use: 'html-loader'
+                },
+                {
+                    //css to js to inline style append
+                    test: /\.css$/,
+                    use: ['style-loader', 'css-loader']
+                },
+                {
+                    //less to css to js to inline style append
+                    test: /\.less$/,
+                    use: ['style-loader', 'css-loader', 'less-loader']
+                }
+            ]
+        }        
+    }
+
+    const developmentSettings = {
+        mode: 'development',
+        output: {
+            path: path.resolve(__dirname, "dist"),
+            publicPath: "/",
+            filename: 'main.js'
+        },
+        devServer: {
+            contentBase: './dist',
+            historyApiFallback: true
+        },
+        plugins: [
+            new CopyWebpackPlugin([
+                {
+                    from: path.resolve(__dirname, '*.html'),
+                    to: path.resolve(__dirname, 'dist', '[name].[ext]')
+                }
+            ])            
+        ]
+    };
+
+    const productionSettings = {
+        mode: "production",
+        plugins: [
+            new CopyWebpackPlugin([
+                {
+                    from: path.resolve(__dirname, '*.html'),
+                    to: path.resolve(__dirname, 'dist', '[name].[ext]')
+                }
+            ]),
+            new ReplaceInFileWebpackPlugin(
+                [
+                    {
+                        dir: path.join(__dirname, 'dist'),
+                        test: /\.html$/,
+                        rules: [
+                            {
+                                search: /((\?|\&)v\=)(.+?)(?=\"|\'|\&)/ig,
+                                replace: (match) => {
+                                    return match.toString().substr(0, 3) +
+                                        +new Date();
+                                }
+                            }
+                        ]
+                    }
+                ]
+            )         
+        ]
+    }
+    //to merge sharedSettings
+    var dev = Object.assign({}, sharedSettings, developmentSettings);
+    var prod = Object.assign({}, sharedSettings, productionSettings);
+
+
+    //return dev or prod to webpack depending on --mode config (webpack-dev-server: argv.mode = undefined)
+    return argv.mode === "development" || argv.mode === undefined ? dev : prod;
+};