new-webpack-4-vscode
Changes
.gitignore 3(+3 -0)
.vscode/launch.json 32(+32 -0)
.vscode/settings.json 3(+3 -0)
app/boot.html 3(+3 -0)
app/boot.less 8(+8 -0)
app/boot.ts 6(+6 -0)
BuildScripts/npm-install.js 13(+13 -0)
BuildScripts/open-localhost.js 3(+3 -0)
BuildScripts/publish.js 20(+20 -0)
BuildScripts/webpack-server.js 17(+17 -0)
index.html 23(+23 -0)
manifest.json 16(+16 -0)
package.json 33(+33 -0)
tsconfig.json 16(+16 -0)
Web.config 24(+24 -0)
webpack.config.js 105(+105 -0)
Details
.gitignore 3(+3 -0)
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
.vscode/launch.json 32(+32 -0)
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
.vscode/settings.json 3(+3 -0)
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
app/boot.html 3(+3 -0)
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 @@
+<div>
+ my app-root html here!
+</div>
\ No newline at end of file
app/boot.less 8(+8 -0)
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
app/boot.ts 6(+6 -0)
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
BuildScripts/npm-install.js 13(+13 -0)
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);
+ }
+ });
BuildScripts/open-localhost.js 3(+3 -0)
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
BuildScripts/publish.js 20(+20 -0)
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
BuildScripts/webpack-server.js 17(+17 -0)
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
index.html 23(+23 -0)
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7d59f69
--- /dev/null
+++ b/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>
\ No newline at end of file
manifest.json 16(+16 -0)
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
package.json 33(+33 -0)
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"
+ }
+}
tsconfig.json 16(+16 -0)
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
Web.config 24(+24 -0)
diff --git a/Web.config b/Web.config
new file mode 100644
index 0000000..e2f9aa7
--- /dev/null
+++ b/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>
\ No newline at end of file
webpack.config.js 105(+105 -0)
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