Change AureliaSpa to use vendor bundle like the other templates

This commit is contained in:
SteveSandersonMS
2016-10-28 14:51:12 +01:00
parent 3087352ea1
commit acfb253a40
6 changed files with 70 additions and 33 deletions

View File

@@ -5,6 +5,6 @@
<div aurelia-app="boot">Loading...</div> <div aurelia-app="boot">Loading...</div>
@section scripts { @section scripts {
<script type="text/javascript" src="~/dist/aurelia-modules-bundle.js" asp-append-version="true"></script> <script type="text/javascript" src="~/dist/vendor.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/dist/app-bundle.js" asp-append-version="true"></script> <script type="text/javascript" src="~/dist/app.js" asp-append-version="true"></script>
} }

View File

@@ -4,6 +4,8 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Aurelia</title> <title>@ViewData["Title"] - Aurelia</title>
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
</head> </head>
<body> <body>
@RenderBody() @RenderBody()

View File

@@ -28,6 +28,7 @@
"css": "^2.2.1", "css": "^2.2.1",
"css-loader": "^0.25.0", "css-loader": "^0.25.0",
"expose-loader": "^0.7.1", "expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.9.0", "file-loader": "^0.9.0",
"html-loader": "^0.4.4", "html-loader": "^0.4.4",
"html-webpack-plugin": "^2.22.0", "html-webpack-plugin": "^2.22.0",
@@ -37,7 +38,7 @@
"ts-loader": "^0.8.2", "ts-loader": "^0.8.2",
"typescript": "^2.0.0", "typescript": "^2.0.0",
"url-loader": "^0.5.7", "url-loader": "^0.5.7",
"webpack": "2.1.0-beta.22", "webpack": "^2.1.0-beta.25",
"webpack-hot-middleware": "^2.10.0" "webpack-hot-middleware": "^2.10.0"
} }
} }

View File

@@ -62,6 +62,7 @@
"scripts": { "scripts": {
"prepublish": [ "prepublish": [
"npm install", "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" "node node_modules/webpack/bin/webpack.js --env.prod"
], ],
"postpublish": "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" "postpublish": "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%"

View File

@@ -6,48 +6,30 @@ var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
module.exports = { module.exports = {
resolve: { extensions: [ '.js', '.ts' ] }, resolve: { extensions: [ '.js', '.ts' ] },
devtool: isDevBuild ? 'inline-source-map' : null, devtool: isDevBuild ? 'inline-source-map' : null,
entry: { entry: { 'app': 'aurelia-bootstrapper-webpack' }, // Note: The aurelia-webpack-plugin will add your app's modules to this bundle automatically
'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'
]
},
output: { output: {
path: path.resolve('./wwwroot/dist'), path: path.resolve('./wwwroot/dist'),
publicPath: '/dist', publicPath: '/dist',
filename: '[name]-bundle.js' filename: '[name].js'
}, },
module: { module: {
loaders: [ loaders: [
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }, { test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
{ test: /\.html$/, loader: 'html-loader' }, { test: /\.html$/, loader: 'html' },
{ test: /\.css$/, loaders: ['style-loader', 'css-loader'] }, { test: /\.css$/, loaders: [ 'style', 'css' ] },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' } { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
] ]
}, },
plugins: [ 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({ new AureliaWebpackPlugin({
root: path.resolve('./'), root: path.resolve('./'),
src: path.resolve('./ClientApp'), src: path.resolve('./ClientApp'),
baseUrl: '/' baseUrl: '/'
}), })
new webpack.optimize.CommonsChunkPlugin({
name: ['aurelia-modules']
}),
].concat(isDevBuild ? [] : [ ].concat(isDevBuild ? [] : [
// Plugins that apply in production builds only // Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin() new webpack.optimize.UglifyJsPlugin()

View File

@@ -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 } })
])
};