diff --git a/templates/AureliaSpa/Views/Home/Index.cshtml b/templates/AureliaSpa/Views/Home/Index.cshtml
index 6061b24..f6b1791 100644
--- a/templates/AureliaSpa/Views/Home/Index.cshtml
+++ b/templates/AureliaSpa/Views/Home/Index.cshtml
@@ -5,6 +5,6 @@
Loading...
@section scripts {
-
-
+
+
}
diff --git a/templates/AureliaSpa/Views/Shared/_Layout.cshtml b/templates/AureliaSpa/Views/Shared/_Layout.cshtml
index a73bc74..9daed47 100644
--- a/templates/AureliaSpa/Views/Shared/_Layout.cshtml
+++ b/templates/AureliaSpa/Views/Shared/_Layout.cshtml
@@ -4,6 +4,8 @@
@ViewData["Title"] - Aurelia
+
+
@RenderBody()
diff --git a/templates/AureliaSpa/package.json b/templates/AureliaSpa/package.json
index 8bacd0b..8ea0cb9 100644
--- a/templates/AureliaSpa/package.json
+++ b/templates/AureliaSpa/package.json
@@ -28,6 +28,7 @@
"css": "^2.2.1",
"css-loader": "^0.25.0",
"expose-loader": "^0.7.1",
+ "extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.9.0",
"html-loader": "^0.4.4",
"html-webpack-plugin": "^2.22.0",
@@ -37,7 +38,7 @@
"ts-loader": "^0.8.2",
"typescript": "^2.0.0",
"url-loader": "^0.5.7",
- "webpack": "2.1.0-beta.22",
+ "webpack": "^2.1.0-beta.25",
"webpack-hot-middleware": "^2.10.0"
}
}
diff --git a/templates/AureliaSpa/project.json b/templates/AureliaSpa/project.json
index 4fcf8fc..a4bb93f 100644
--- a/templates/AureliaSpa/project.json
+++ b/templates/AureliaSpa/project.json
@@ -62,6 +62,7 @@
"scripts": {
"prepublish": [
"npm install",
+ "node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod",
"node node_modules/webpack/bin/webpack.js --env.prod"
],
"postpublish": "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%"
diff --git a/templates/AureliaSpa/webpack.config.js b/templates/AureliaSpa/webpack.config.js
index 7e3c6a2..5c0fbe7 100644
--- a/templates/AureliaSpa/webpack.config.js
+++ b/templates/AureliaSpa/webpack.config.js
@@ -4,50 +4,32 @@ var webpack = require('webpack');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
module.exports = {
- resolve: { extensions: [ '.js', '.ts' ] },
- devtool: isDevBuild ? 'inline-source-map' : null,
- entry: {
- 'app': [], // <-- this array will be filled by the aurelia-webpack-plugin
- 'aurelia-modules': [
- 'aurelia-bootstrapper-webpack',
- 'aurelia-event-aggregator',
- 'aurelia-fetch-client',
- 'aurelia-framework',
- 'aurelia-history-browser',
- 'aurelia-loader-webpack',
- 'aurelia-logging-console',
- 'aurelia-pal-browser',
- 'aurelia-polyfills',
- 'aurelia-route-recognizer',
- 'aurelia-router',
- 'aurelia-templating-binding',
- 'aurelia-templating-resources',
- 'aurelia-templating-router'
- ]
- },
+ resolve: { extensions: [ '.js', '.ts' ] },
+ devtool: isDevBuild ? 'inline-source-map' : null,
+ entry: { 'app': 'aurelia-bootstrapper-webpack' }, // Note: The aurelia-webpack-plugin will add your app's modules to this bundle automatically
output: {
path: path.resolve('./wwwroot/dist'),
publicPath: '/dist',
- filename: '[name]-bundle.js'
+ filename: '[name].js'
},
module: {
loaders: [
- { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: {silent: true} },
- { test: /\.html$/, loader: 'html-loader' },
- { test: /\.css$/, loaders: ['style-loader', 'css-loader'] },
+ { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
+ { test: /\.html$/, loader: 'html' },
+ { test: /\.css$/, loaders: [ 'style', 'css' ] },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
},
plugins: [
- new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // because Bootstrap expects $ and jQuery to be globals
+ new webpack.DllReferencePlugin({
+ context: __dirname,
+ manifest: require('./wwwroot/dist/vendor-manifest.json')
+ }),
new AureliaWebpackPlugin({
root: path.resolve('./'),
src: path.resolve('./ClientApp'),
baseUrl: '/'
- }),
- new webpack.optimize.CommonsChunkPlugin({
- name: ['aurelia-modules']
- }),
+ })
].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin()
diff --git a/templates/AureliaSpa/webpack.config.vendor.js b/templates/AureliaSpa/webpack.config.vendor.js
new file mode 100644
index 0000000..e6051cb
--- /dev/null
+++ b/templates/AureliaSpa/webpack.config.vendor.js
@@ -0,0 +1,51 @@
+var isDevBuild = process.argv.indexOf('--env.prod') < 0;
+var path = require('path');
+var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var extractCSS = new ExtractTextPlugin('vendor.css');
+
+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: [
+ 'aurelia-event-aggregator',
+ 'aurelia-fetch-client',
+ 'aurelia-framework',
+ 'aurelia-history-browser',
+ 'aurelia-logging-console',
+ 'aurelia-pal-browser',
+ 'aurelia-polyfills',
+ 'aurelia-route-recognizer',
+ 'aurelia-router',
+ 'aurelia-templating-binding',
+ 'aurelia-templating-resources',
+ 'aurelia-templating-router',
+ 'bootstrap',
+ 'bootstrap/dist/css/bootstrap.css',
+ 'jquery'
+ ],
+ },
+ 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.DllPlugin({
+ path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
+ name: '[name]_[hash]'
+ })
+ ].concat(isDevBuild ? [] : [
+ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
+ ])
+};