new version for latest webpack 4.28.x

.gitignore

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

.vscode/launch.json

@@ -7,26 +7,20 @@
         {
             "type": "node",
             "request": "launch",
-            "name": "1. Run NPM install (first time run)",
+            "name": "1. Install NPM packages (first time only)",
-            "program": "${workspaceFolder}/BuildScripts/npm-install.js"
+            "program": "${workspaceFolder}/BuildScripts/install-npm-packages.js"
         },
         {
             "type": "node",
             "request": "launch",
-            "name": "2. Start webpack server (w. hot)",
+            "name": "2. Start server (w. hot)",
-            "program": "${workspaceFolder}/BuildScripts/webpack-server.js"
+            "program": "${workspaceFolder}/BuildScripts/start-webpack-dev-server.js"
         },
         {
             "type": "node",
             "request": "launch",
-            "name": "3. Re-open localhost (if webpack server already running)",
+            "name": "3. Build for production",
-            "program": "${workspaceFolder}/BuildScripts/open-localhost.js"
+            "program": "${workspaceFolder}/BuildScripts/output-production.js"
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "4. Publish",
-            "program": "${workspaceFolder}/BuildScripts/publish.js"
         }
     ]
 }

.vscode/settings.json

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

BuildScripts/install-npm-packages.js

@@ -10,4 +10,4 @@ exec('npm install',
         else {
             console.error("Successfully installed NPM packages", stdout, stderr);
         }
-    });
+    });

BuildScripts/open-localhost.js

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

BuildScripts/output-production.js

@@ -0,0 +1,6 @@
+const open = require("open");
+const runScript = require("./run-npm-script");
+
+runScript("production", () => {
+    console.log('Successful output to "prod-dist" folder');
+});

BuildScripts/publish.js

@@ -1,20 +0,0 @@
-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/run-npm-script.js

@@ -0,0 +1,31 @@
+const npm = require("npm");
+
+module.exports = function(scriptName, onSuccess, onError) {
+
+    npm.load(function(err) {
+        console.log('Running npm script: "' + scriptName + '"');
+        npm.commands.run([scriptName], function(error, data) {
+
+            if (error) {
+                console.error('Npm script: "' + scriptName + '" error', error);
+
+                if (onError) {
+                    onError(error);
+                }
+            }
+            else {
+                console.log('Npm script: "' + scriptName + '" ran successfully');
+
+                if (onSuccess) {
+                    onSuccess(data);
+                }
+            }
+
+        });
+
+        npm.on('log', function(message) {
+            console.log('Npm script: "' + scriptName + '" log', message);
+        });
+    });
+
+}

BuildScripts/start-webpack-dev-server.js

@@ -0,0 +1,6 @@
+const open = require("open");
+const runScript = require("./run-npm-script");
+
+runScript("server", () => {
+    open("http://localhost:8020");
+});

BuildScripts/webpack-server.js

@@ -1,17 +0,0 @@
-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);
-  });
-});

app/app.html

@@ -0,0 +1 @@
+<div>App running</div>

app/app.less

@@ -0,0 +1,3 @@
+body {
+    background: aqua;
+}

app/boot.html

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

app/boot.less

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

app/boot.ts

@@ -1,5 +1,6 @@
-require("./boot.less");
+import './app.less';
-var bootHtml = require("./boot.html");
+import bootHtml from './app.html';
+
 var appEle = document.createElement("app-root");
 appEle.innerHTML = bootHtml;
 

index.html

@@ -8,9 +8,6 @@
     <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="/" />

package.json

@@ -1,33 +1,40 @@
 {
-  "version": "0.0.1",
+  "version": "0.0.2",
-  "name": "new-webpack",
+  "name": "drummachine",
-  "description": "new-webpack",
+  "description": "web drumkit project",
   "license": "0BSD",
   "repository": {},
   "scripts": {
-    "webpack-error-details": "webpack --display-error-details",
+    "webpack": "webpack --config webpack.dev.js --display-error-details",
-    "webpack-development": "webpack --display-error-details --mode development",
+    "dev": "webpack --config webpack.dev.js --display-error-details",
-    "webpack-production": "webpack --display-error-details --mode production",
+    "server": "webpack-dev-server --port 8020 --open --config webpack.dev.js",
-    "webpack-dev-server": "webpack-dev-server"
+    "production": "webpack --config webpack.prod.js"
   },
+  "dependencies": {},
   "devDependencies": {
-    "@types/webpack-env": "1.13.6",
+    "@webcomponents/custom-elements": "1.2.1",
-    "copy-webpack-plugin": "4.5.1",
+    "@babel/core": "7.2.2",
-    "css-loader": "0.28.11",
+    "babel-loader": "8.0.5",
-    "file-loader": "1.1.11",
+    "babel-plugin-transform-custom-element-classes": "0.1.0",
-    "gulp": "3.9.1",
+    "babel-preset-env": "1.7.0",
+    "copy-webpack-plugin": "4.6.0",
+    "css-loader": "2.1.0",
+    "extract-text-webpack-plugin": "3.0.2",
+    "replace-in-file-webpack-plugin": "1.0.6",
+    "file-loader": "3.0.1",
+    "gulp": "4.0.0",
     "html-loader": "0.5.5",
-    "less": "3.0.2",
+    "less": "3.9.0",
     "less-loader": "4.1.0",
-    "npm": "6.0.0",
+    "npm": "6.6.0",
     "open": "0.0.5",
-    "replace-in-file-webpack-plugin": "1.0.5",
+    "path": "0.12.7",
-    "style-loader": "0.21.0",
+    "style-loader": "0.23.1",
-    "ts-loader": "4.2.0",
+    "ts-loader": "5.3.3",
-    "typescript": "2.8.3",
+    "webpack": "4.28.4",
-    "webpack": "4.6.0",
+    "webpack-cli": "3.2.1",
-    "webpack-cli": "2.0.15",
+    "webpack-dev-server": "3.1.14",
-    "webpack-dev-server": "3.1.3",
+    "webpack-merge": "4.2.1",
-    "webpack-merge": "4.1.2"
+    "typescript": "3.2.4"
   }
 }

tsconfig.json

@@ -8,9 +8,9 @@
     "skipLibCheck": true,
     "strict": true,
     "lib": [ "es6", "dom" ],
-    "types": [ "webpack-env" ],
+    "types": [ ],
     "allowJs": true
   },
-  "exclude": [ "bin", "node_modules" ],
+  "exclude": [ "bin", "node_modules", "webpack.common.js", "webpack.dev.js", "webpack.prod.js" ],
   "atom": { "rewriteTsconfig": false }
 }

typings.d.ts

@@ -0,0 +1,7 @@
+declare module '*.html' {
+    const content: string;
+    export default content;
+}
+
+declare module '*.png';
+declare module '*.jpg';

webpack.common.js

@@ -0,0 +1,33 @@
+const path = require('path');
+module.exports = {
+    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']
+            }
+        ]
+    }
+};

webpack.config.js

@@ -1,105 +0,0 @@
-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;
-};

webpack.dev.js

@@ -0,0 +1,27 @@
+const path = require('path');
+const merge = require('webpack-merge');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const common = require('./webpack.common.js');
+
+const devFolderName = "dev-dist";
+
+module.exports = merge(common, {
+    mode: 'development',
+    output: {
+        path: path.resolve(__dirname, devFolderName),
+        publicPath: "/",
+        filename: 'main.js'
+    },
+    devServer: {
+        contentBase: './' + devFolderName,
+        historyApiFallback: true
+    },
+    plugins: [
+        new CopyWebpackPlugin([
+            {
+                from: path.resolve(__dirname, '*.html'),
+                to: path.resolve(__dirname, devFolderName, '[name].[ext]')
+            }
+        ])
+    ]
+});

webpack.prod.js

@@ -0,0 +1,44 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const prodFolderName = "prod-dist";
+
+const replaceVersionInHtmlOption =  {
+    //set ?v= with new date in html files for production
+    dir: path.join(__dirname, prodFolderName),
+    test: /\.html$/,
+    rules: [
+        {
+            search: /((\?|\&)v\=)(.+?)(?=\"|\'|\&)/ig,
+            replace: (match) => {
+                return match.toString().substr(0, 3) +
+                    +new Date();
+            }
+        }
+    ]
+};
+
+module.exports = merge(common, {
+    mode: "production",
+    output: {
+        path: path.resolve(__dirname, prodFolderName),
+        publicPath: "/",
+        filename: 'main.js'
+    },
+    plugins: [
+        new CopyWebpackPlugin([
+            {
+                from: path.resolve(__dirname, '*.html'),
+                to: path.resolve(__dirname, prodFolderName, '[name].[ext]')
+            }
+        ]),
+        new ReplaceInFileWebpackPlugin(
+            [
+                replaceVersionInHtmlOption
+            ]
+        )
+    ]
+});