chore(webpack): init webpack setup with basic app and index.html

ngParty · Feb 23, 2016 · 8484242 · 8484242
1 parent c0a743c
commit 8484242
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 2 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,5 @@
 .idea
-node_modules
+node_modules
+src/**.js
+src/**.js.map
+typings
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+save-exact=true
diff --git a/README.md b/README.md
@@ -3,3 +3,15 @@
 Angular 1 Scaffold by ngParty team.
 
 
+## Install
+
+```bash
+$ npm install
+```
+
+## Start Development
+
+```bash
+$ npm start
+```
+
diff --git a/package.json b/package.json
@@ -3,15 +3,35 @@
   "version": "1.0.0",
   "description": "Angular 1 scaffold with Typescript and ng-metadata",
   "main": "app/app.js",
-  "scripts": {},
+  "config": {
+    "port": "9000"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ngParty/Angular1-scaffold.git"
+  },
+  "scripts": {
+    "typings": "typings install",
+    "postinstall": "npm run typings",
+    "start": "webpack-dev-server --port $npm_package_config_port --hot --inline --progress --profile --colors --watch --display-error-details --display-cached --content-base src/"
+  },
   "keywords": [],
   "contributors": [
     "Martin Hochel <[email protected]>",
     "Mario Vejlupek <[email protected]>"
   ],
   "license": "ISC",
   "dependencies": {
+    "angular": "1.5.0",
+    "ng-metadata": "1.0.0"
   },
   "devDependencies": {
+    "copy-webpack-plugin": "1.1.1",
+    "html-webpack-plugin": "2.9.0",
+    "ts-loader": "0.8.1",
+    "typescript": "1.7.5",
+    "typings": "0.6.8",
+    "webpack": "1.12.13",
+    "webpack-dev-server": "1.14.1"
   }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -0,0 +1,9 @@
+import { Component } from 'ng-metadata/core';
+
+@Component({
+  selector: `app`,
+  template: `
+    <h1>Hello from Pluto!!!</h1>
+  `
+})
+export class AppComponent{}
diff --git a/src/app/app.ts b/src/app/app.ts
@@ -0,0 +1,9 @@
+import * as angular from 'angular';
+import { provide } from 'ng-metadata/core';
+
+import { AppComponent } from './app.component.ts';
+
+const ngModule = angular.module( 'app', [] )
+  .directive( ...provide( AppComponent ) );
+
+export const AppModule = ngModule;
diff --git a/src/bootstrap.ts b/src/bootstrap.ts
@@ -0,0 +1,4 @@
+import { bootstrap } from 'ng-metadata/platform';
+import { AppModule } from './app/app';
+
+bootstrap( AppModule );
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="">
+<head>
+
+    <title><%= htmlWebpackPlugin.options.title %></title>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="<%= htmlWebpackPlugin.options.title %>">
+
+</head>
+
+<body>
+
+<app>
+    Loading...
+</app>
+
+<% if (htmlWebpackPlugin.options.googleAnalytics) { %>
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    <% if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
+        ga('create', '<%= htmlWebpackPlugin.options.googleAnalytics.trackingId%>', 'auto');
+    <% } else { throw new Error("html-webpack-template requires googleAnalytics.trackingId config"); }%>
+    <% if (htmlWebpackPlugin.options.googleAnalytics.pageViewOnLoad) { %>
+        ga('send', 'pageview');
+    <% } %>
+</script>
+<% } %>
+
+<% if (htmlWebpackPlugin.options.env === 'development') { %>
+<!-- Webpack Dev Server reload -->
+<script src="http://<%= htmlWebpackPlugin.options.host %>:<%= htmlWebpackPlugin.options.port %>/webpack-dev-server.js"></script>
+<% } %>
+
+</body>
+</html>
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "noImplicitAny": false,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node"
+  },
+  "exclude": [
+    "node_modules",
+    "typings/main",
+    "typings/main.d.ts"
+  ]
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,74 @@
+const webpack = require( 'webpack' );
+
+const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
+const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
+
+const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
+
+const webpackConfigEntryPoints = {
+  app: './src/bootstrap.ts'
+};
+
+const webpackConfigLoaders = [
+
+  // Scripts
+  {
+    test: /\.ts$/,
+    exclude: [ /node_modules/ ],
+    loader: 'ts-loader'
+  },
+
+  // Styles
+  {
+    test: /\.scss$/,
+    loaders: [ 'style', 'css', 'sass' ]
+  }
+
+];
+
+const webpackConfigPlugins = [
+
+  new HtmlWebpackPlugin({
+    title: 'Tombaugh Regio',
+    template: 'src/index.html',
+    env: ENV,
+    host: '0.0.0.0',
+    port: process.env.npm_package_config_port,
+    googleAnalytics: {
+      trackingId: 'UA-XXXX-XX'
+    }
+  }),
+
+  new CopyWebpackPlugin([
+    {
+      from: 'src/assets',
+      to: './'
+    }
+  ])
+
+  // // Load lodash into global
+  // new webpack.ProvidePlugin( {
+  //   lodash: 'lodash'
+  // } )
+
+];
+
+
+module.exports = {
+  devtool: 'source-map',
+  entry: webpackConfigEntryPoints,
+  output: {
+    path: '/',
+    publicPath: '/',
+    filename: '[name].js'
+  },
+  resolve: {
+    // Add `.ts` as a resolvable extension.
+    extensions: [ '', '.webpack.js', '.web.js', '.ts', '.js' ]
+  },
+  watch: true,
+  module: {
+    loaders: webpackConfigLoaders
+  },
+  plugins: webpackConfigPlugins
+};