From 0167d5ca3f53c5d67324cb8cd3885e048d3f0921 Mon Sep 17 00:00:00 2001 From: SteveSandersonMS Date: Tue, 1 Mar 2016 16:25:37 +0000 Subject: [PATCH] Change WebApplicationBasic template to use web pack vendor DLL and to load CSS as a file (not via JS). Also remove Babel as it's not doing anything here. --- .../Views/Shared/_Layout.cshtml | 5 ++- templates/WebApplicationBasic/package.json | 5 --- templates/WebApplicationBasic/project.json | 3 +- templates/WebApplicationBasic/tsconfig.json | 2 +- .../WebApplicationBasic/webpack.config.dev.js | 7 +--- .../WebApplicationBasic/webpack.config.js | 16 +++++---- .../webpack.config.prod.js | 9 +---- .../webpack.config.vendor.js | 36 +++++++++++++++++++ 8 files changed, 52 insertions(+), 31 deletions(-) create mode 100644 templates/WebApplicationBasic/webpack.config.vendor.js diff --git a/templates/WebApplicationBasic/Views/Shared/_Layout.cshtml b/templates/WebApplicationBasic/Views/Shared/_Layout.cshtml index c095086..787de23 100755 --- a/templates/WebApplicationBasic/Views/Shared/_Layout.cshtml +++ b/templates/WebApplicationBasic/Views/Shared/_Layout.cshtml @@ -5,9 +5,8 @@ @ViewData["Title"] - WebApplicationBasic - - - + +
diff --git a/templates/WebApplicationBasic/package.json b/templates/WebApplicationBasic/package.json index 1d7c921..b899475 100644 --- a/templates/WebApplicationBasic/package.json +++ b/templates/WebApplicationBasic/package.json @@ -2,8 +2,6 @@ "name": "WebApplicationBasic", "version": "0.0.0", "devDependencies": { - "babel-loader": "^6.2.3", - "babel-preset-es2015": "^6.5.0", "bootstrap": "^3.3.6", "css-loader": "^0.23.1", "extendify": "^1.0.0", @@ -15,8 +13,5 @@ "typescript": "^1.8.2", "url-loader": "^0.5.7", "webpack": "^1.12.14" - }, - "dependencies": { - "babel-core": "^6.5.2" } } diff --git a/templates/WebApplicationBasic/project.json b/templates/WebApplicationBasic/project.json index 6633154..76c3a6e 100755 --- a/templates/WebApplicationBasic/project.json +++ b/templates/WebApplicationBasic/project.json @@ -42,8 +42,9 @@ "**.vspscc" ], "scripts": { - "prepublish": [ + "prepare": [ "npm install", + "webpack --config webpack.config.vendor.js", "webpack" ] } diff --git a/templates/WebApplicationBasic/tsconfig.json b/templates/WebApplicationBasic/tsconfig.json index 4340e17..cd09747 100644 --- a/templates/WebApplicationBasic/tsconfig.json +++ b/templates/WebApplicationBasic/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "moduleResolution": "node", - "target": "es6", + "target": "es5", "sourceMap": true }, "exclude": [ diff --git a/templates/WebApplicationBasic/webpack.config.dev.js b/templates/WebApplicationBasic/webpack.config.dev.js index fd41ce6..719de1f 100644 --- a/templates/WebApplicationBasic/webpack.config.dev.js +++ b/templates/WebApplicationBasic/webpack.config.dev.js @@ -1,8 +1,3 @@ module.exports = { - devtool: 'inline-source-map', - module: { - loaders: [ - { test: /\.css/, loader: 'style!css' } - ] - } + devtool: 'inline-source-map' }; diff --git a/templates/WebApplicationBasic/webpack.config.js b/templates/WebApplicationBasic/webpack.config.js index 3db3efe..eb3a308 100644 --- a/templates/WebApplicationBasic/webpack.config.js +++ b/templates/WebApplicationBasic/webpack.config.js @@ -1,9 +1,11 @@ var path = require('path'); var webpack = require('webpack'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); var merge = require('extendify')({ isDeep: true, arrays: 'concat' }); var devConfig = require('./webpack.config.dev'); var prodConfig = require('./webpack.config.prod'); var isDevelopment = process.env.ASPNET_ENV === 'Development'; +var extractCSS = new ExtractTextPlugin('site.css'); module.exports = merge({ resolve: { @@ -11,14 +13,12 @@ module.exports = merge({ }, module: { loaders: [ - { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'babel-loader' }, { test: /\.ts(x?)$/, include: /ClientApp/, loader: 'ts-loader' }, - { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' } + { test: /\.css/, loader: extractCSS.extract(['css']) } ] }, entry: { - main: ['./ClientApp/App.ts'], - vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'style-loader', 'jquery'] + main: ['./ClientApp/App.ts'] }, output: { path: path.join(__dirname, 'wwwroot', 'dist'), @@ -26,8 +26,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 + extractCSS, + new webpack.DllReferencePlugin({ + context: __dirname, + manifest: require('./wwwroot/dist/vendor-manifest.json') + }) ] }, isDevelopment ? devConfig : prodConfig); diff --git a/templates/WebApplicationBasic/webpack.config.prod.js b/templates/WebApplicationBasic/webpack.config.prod.js index 846e8e1..775f115 100644 --- a/templates/WebApplicationBasic/webpack.config.prod.js +++ b/templates/WebApplicationBasic/webpack.config.prod.js @@ -1,15 +1,8 @@ var webpack = require('webpack'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); -var extractCSS = new ExtractTextPlugin('site.css'); module.exports = { - module: { - loaders: [ - { test: /\.css/, loader: extractCSS.extract(['css']) }, - ] - }, plugins: [ - extractCSS, + new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ minimize: true }) ] }; diff --git a/templates/WebApplicationBasic/webpack.config.vendor.js b/templates/WebApplicationBasic/webpack.config.vendor.js new file mode 100644 index 0000000..7e16147 --- /dev/null +++ b/templates/WebApplicationBasic/webpack.config.vendor.js @@ -0,0 +1,36 @@ +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: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'style-loader', '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.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 } }) + ]) +};