diff --git a/templates/Angular2Spa/ClientApp/boot-client.ts b/templates/Angular2Spa/ClientApp/boot-client.ts index 7efdb66..5a5d958 100644 --- a/templates/Angular2Spa/ClientApp/boot-client.ts +++ b/templates/Angular2Spa/ClientApp/boot-client.ts @@ -1,4 +1,4 @@ -import 'bootstrap/dist/css/bootstrap.css'; +import 'angular2/bundles/angular2-polyfills.js'; import './styles/site.css'; import { bootstrap } from 'angular2/platform/browser'; diff --git a/templates/Angular2Spa/Views/Home/Index.cshtml b/templates/Angular2Spa/Views/Home/Index.cshtml index 2f99cad..707ef17 100644 --- a/templates/Angular2Spa/Views/Home/Index.cshtml +++ b/templates/Angular2Spa/Views/Home/Index.cshtml @@ -2,9 +2,9 @@ ViewData["Title"] = "Home Page"; } -Loading... +Loading... + @section scripts { } diff --git a/templates/Angular2Spa/Views/Shared/_Layout.cshtml b/templates/Angular2Spa/Views/Shared/_Layout.cshtml index 72a3ea2..90d892b 100644 --- a/templates/Angular2Spa/Views/Shared/_Layout.cshtml +++ b/templates/Angular2Spa/Views/Shared/_Layout.cshtml @@ -11,7 +11,6 @@ @RenderBody() - @RenderSection("scripts", required: false) diff --git a/templates/Angular2Spa/project.json b/templates/Angular2Spa/project.json index 033f196..c365aa3 100755 --- a/templates/Angular2Spa/project.json +++ b/templates/Angular2Spa/project.json @@ -43,8 +43,11 @@ "**.vspscc" ], "scripts": { - "prepublish": [ + "prepare": [ "npm install", + "webpack --config webpack.config.vendor.js" + ], + "prepublish": [ "webpack" ] } diff --git a/templates/Angular2Spa/webpack.config.js b/templates/Angular2Spa/webpack.config.js index 03458d5..073dd59 100644 --- a/templates/Angular2Spa/webpack.config.js +++ b/templates/Angular2Spa/webpack.config.js @@ -2,8 +2,7 @@ var path = require('path'); var webpack = require('webpack'); var merge = require('extendify')({ isDeep: true, arrays: 'concat' }); var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var extractSiteCSS = new ExtractTextPlugin('styles.css'); -var extractVendorCSS = new ExtractTextPlugin('vendor.css'); +var extractCSS = new ExtractTextPlugin('styles.css'); var devConfig = require('./webpack.config.dev'); var prodConfig = require('./webpack.config.prod'); var isDevelopment = process.env.ASPNET_ENV === 'Development'; @@ -15,15 +14,12 @@ module.exports = merge({ module: { loaders: [ { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader' }, - { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, { test: /\.html$/, loader: 'raw-loader' }, - { test: /\.css/, include: /bootstrap/, loader: extractVendorCSS.extract(['css']) }, - { test: /\.css/, exclude: /bootstrap/, loader: extractSiteCSS.extract(['css']) }, + { test: /\.css/, loader: extractCSS.extract(['css']) } ] }, entry: { - main: ['./ClientApp/boot-client.ts'], - vendor: ['angular2/bundles/angular2-polyfills.js', 'bootstrap', 'style-loader', 'jquery', 'angular2/core', 'angular2/common', 'angular2/http', 'angular2/router', 'angular2/platform/browser'] + main: ['./ClientApp/boot-client.ts'] }, output: { path: path.join(__dirname, 'wwwroot', 'dist'), @@ -31,10 +27,10 @@ module.exports = merge({ publicPath: '/dist/' }, plugins: [ - new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'), // Moves vendor content out of other bundles - extractSiteCSS, - extractVendorCSS + extractCSS, + new webpack.DllReferencePlugin({ + context: __dirname, + manifest: require('./wwwroot/dist/vendor-manifest.json') + }) ] }, isDevelopment ? devConfig : prodConfig); diff --git a/templates/Angular2Spa/webpack.config.prod.js b/templates/Angular2Spa/webpack.config.prod.js index 3180105..ddc6cf7 100644 --- a/templates/Angular2Spa/webpack.config.prod.js +++ b/templates/Angular2Spa/webpack.config.prod.js @@ -2,7 +2,9 @@ var webpack = require('webpack'); module.exports = { plugins: [ + new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ + compress: { warnings: false }, minimize: true, mangle: false // Due to https://github.com/angular/angular/issues/6678 }) diff --git a/templates/Angular2Spa/webpack.config.vendor.js b/templates/Angular2Spa/webpack.config.vendor.js new file mode 100644 index 0000000..5e5a01c --- /dev/null +++ b/templates/Angular2Spa/webpack.config.vendor.js @@ -0,0 +1,40 @@ +var path = require('path'); +var webpack = require('webpack'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var extractCSS = new ExtractTextPlugin('vendor.css'); +var isDevelopment = process.env.ASPNET_ENV === 'Development'; + +module.exports = { + resolve: { + extensions: [ '', '.js' ] + }, + module: { + loaders: [ + { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }, + { test: /\.css/, loader: extractCSS.extract(['css']) } + ] + }, + entry: { + vendor: ['angular2/bundles/angular2-polyfills.js', 'bootstrap', 'bootstrap/dist/css/bootstrap.css', 'style-loader', 'jquery', 'angular2/core', 'angular2/common', 'angular2/http', 'angular2/router', 'angular2/platform/browser'] + }, + output: { + path: path.join(__dirname, 'wwwroot', 'dist'), + filename: '[name].js', + library: '[name]_[hash]', + }, + plugins: [ + extractCSS, + new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable) + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.DllPlugin({ + path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), + name: '[name]_[hash]' + }) + ].concat(isDevelopment ? [] : [ + new webpack.optimize.UglifyJsPlugin({ + compress: { warnings: false }, + minimize: true, + mangle: true // Due to https://github.com/angular/angular/issues/6678 + }) + ]) +}; diff --git a/templates/ReactSpa/webpack.config.prod.js b/templates/ReactSpa/webpack.config.prod.js index 63fa98e..068da38 100644 --- a/templates/ReactSpa/webpack.config.prod.js +++ b/templates/ReactSpa/webpack.config.prod.js @@ -11,6 +11,6 @@ module.exports = { plugins: [ extractCSS, new webpack.optimize.OccurenceOrderPlugin(), - new webpack.optimize.UglifyJsPlugin({ minimize: true }) + new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] }; diff --git a/templates/ReactSpa/webpack.config.vendor.js b/templates/ReactSpa/webpack.config.vendor.js index 9f22c26..e0b57b8 100644 --- a/templates/ReactSpa/webpack.config.vendor.js +++ b/templates/ReactSpa/webpack.config.vendor.js @@ -2,6 +2,7 @@ var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var extractCSS = new ExtractTextPlugin('vendor.css'); +var isDevelopment = process.env.ASPNET_ENV === 'Development'; module.exports = { resolve: { @@ -29,5 +30,7 @@ module.exports = { path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), name: '[name]_[hash]' }) - ] + ].concat(isDevelopment ? [] : [ + new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) + ]) };