Add angular2-template-loader. Comments in webpack.config

Author: hdeshev

postinstall.js

@@ -43,7 +43,7 @@ configureDevDependencies(packageJson, function(add) {
     add("webpack-sources", "~0.1.2");
     add("copy-webpack-plugin", "~3.0.1");
     add("awesome-typescript-loader", "~2.2.4");
-    add("html-loader", "~0.4.3");
+    add("angular2-template-loader", "~0.6.0");
     add("raw-loader", "~0.5.1");
 });
 

webpack.common.js.template

@@ -1,17 +1,18 @@
 var webpack = require("webpack");
 var nsWebpack = require("nativescript-dev-webpack");
-var sources = require("webpack-sources");
 var path = require("path");
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-var fs = require("fs");
+var CopyWebpackPlugin = require("copy-webpack-plugin");
 var path = require("path");
 
 module.exports = function(platform, destinationApp) {
     if (!destinationApp) {
+        //Default destination inside platforms/<platform>/...
         destinationApp = nsWebpack.getAppPath(platform);
     }
     var entry = {};
+    //Discover entry module from package.json
     entry.bundle = "./" + nsWebpack.getEntryModule();
+    //Vendor entry with third party libraries.
     entry.vendor = "./vendor";
 
     return {
@@ -25,12 +26,14 @@ module.exports = function(platform, destinationApp) {
             jsonpFunction: "nativescriptJsonp"
         },
         resolve: {
+            //Resolve platform-specific modules like module.android.js
             extensions: [
                 ".ts",
                 ".js",
                 "." + platform + ".ts",
                 "." + platform + ".js",
             ],
+            //Resolve {N} system modules from tns-core-modules
             modules: [
                 "node_modules/tns-core-modules",
                 "node_modules"
@@ -46,38 +49,54 @@ module.exports = function(platform, destinationApp) {
             loaders: [
                 {
                     test: /\.html$/,
-                    loader: "html-loader"
+                    loader: "raw-loader"
+                },
+                {
+                    test: /\.css$/,
+                    loader: "raw-loader"
                 },
                 {
                     test: /\.ts$/,
-                    loader: 'awesome-typescript-loader'
+                    loaders: [
+                        "awesome-typescript-loader",
+                        "angular2-template-loader"
+                    ]
                 },
                 {
                     test: /\.scss$/,
                     loaders: [
-                        'raw-loader', 'resolve-url', 'sass'
+                        "raw-loader",
+                        "resolve-url",
+                        "sass-loader"
                     ]
                 },
             ]
         },
         plugins: [
+            //Vendor libs go to the vendor.js chunk
             new webpack.optimize.CommonsChunkPlugin({
                 name: ["vendor"]
             }),
+            //Define useful constants like TNS_WEBPACK
             new webpack.DefinePlugin({
-                global: 'global',
-                __dirname: '__dirname',
-                "global.TNS_WEBPACK": 'true',
+                global: "global",
+                __dirname: "__dirname",
+                "global.TNS_WEBPACK": "true",
             }),
+            //Copy assets to out dir. Add your own globs as needed.
             new CopyWebpackPlugin([
-                { from: "**/*.css" },
-                { from: "**/*.html" },
-                { from: "**/*.xml", ignore: "App_Resources/**" },
-            ]),
+                {from: "app.css"},
+                {from: "css/**"},
+                {from: "**/*.jpg"},
+                {from: "**/*.png"},
+                {from: "**/*.xml"},
+            ], {ignore: ["App_Resources/**"]}),
+            //Generate a bundle starter script and activate it in package.json
             new nsWebpack.GenerateBundleStarterPlugin([
                 "./vendor",
                 "./bundle",
             ]),
+            //Required for bundle chunks loading
             new nsWebpack.NativeScriptJsonpPlugin(),
         ]
     };