From acfb253a4018669fcf68b359eb3554e3ac7af052 Mon Sep 17 00:00:00 2001 From: SteveSandersonMS Date: Fri, 28 Oct 2016 14:51:12 +0100 Subject: [PATCH] Change AureliaSpa to use vendor bundle like the other templates --- templates/AureliaSpa/Views/Home/Index.cshtml | 4 +- .../AureliaSpa/Views/Shared/_Layout.cshtml | 2 + templates/AureliaSpa/package.json | 3 +- templates/AureliaSpa/project.json | 1 + templates/AureliaSpa/webpack.config.js | 42 +++++---------- templates/AureliaSpa/webpack.config.vendor.js | 51 +++++++++++++++++++ 6 files changed, 70 insertions(+), 33 deletions(-) create mode 100644 templates/AureliaSpa/webpack.config.vendor.js 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 } }) + ]) +};