commit b060a71135425dd93faa91d332c64d10a9bf7b2b Author: David Date: Sun Apr 29 16:26:44 2018 +0200 Add to git diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..87a7db1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/node_modules +package-lock.json +/dist \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..3b530d8 --- /dev/null +++ b/.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" + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..00ad71f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules\\typescript\\lib" +} \ No newline at end of file diff --git a/BuildScripts/npm-install.js b/BuildScripts/npm-install.js new file mode 100644 index 0000000..0bb2f33 --- /dev/null +++ b/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); + } + }); diff --git a/BuildScripts/open-localhost.js b/BuildScripts/open-localhost.js new file mode 100644 index 0000000..fb014f7 --- /dev/null +++ b/BuildScripts/open-localhost.js @@ -0,0 +1,3 @@ +var open = require("open"); + +open("http://localhost:8080"); \ No newline at end of file diff --git a/BuildScripts/publish.js b/BuildScripts/publish.js new file mode 100644 index 0000000..e2d5929 --- /dev/null +++ b/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); + }); +}); \ No newline at end of file diff --git a/BuildScripts/webpack-server.js b/BuildScripts/webpack-server.js new file mode 100644 index 0000000..b8bc1f8 --- /dev/null +++ b/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); + }); +}); \ No newline at end of file diff --git a/Web.config b/Web.config new file mode 100644 index 0000000..e2f9aa7 --- /dev/null +++ b/Web.config @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/boot.html b/app/boot.html new file mode 100644 index 0000000..91360a4 --- /dev/null +++ b/app/boot.html @@ -0,0 +1,3 @@ +
+ my app-root html here! +
\ No newline at end of file diff --git a/app/boot.less b/app/boot.less new file mode 100644 index 0000000..ac1dd10 --- /dev/null +++ b/app/boot.less @@ -0,0 +1,8 @@ +html, body { + position: relative; + height: 100%; + width: 100%; + background: rgb(179, 179, 179); + margin: 0; + overflow: hidden; +} \ No newline at end of file diff --git a/app/boot.ts b/app/boot.ts new file mode 100644 index 0000000..3183cee --- /dev/null +++ b/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); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..7d59f69 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + + + + Title + + + + + + + + + + + + + + \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..f38570e --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..32b1606 --- /dev/null +++ b/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" + } +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..2addfd2 --- /dev/null +++ b/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 } +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..ebd0d25 --- /dev/null +++ b/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; +}; \ No newline at end of file