X Tutup
Skip to content

Commit 0167d5c

Browse files
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.
1 parent 22cebe7 commit 0167d5c

File tree

8 files changed

+52
-31
lines changed

8 files changed

+52
-31
lines changed

templates/WebApplicationBasic/Views/Shared/_Layout.cshtml

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>@ViewData["Title"] - WebApplicationBasic</title>
77

8-
<environment names="Staging,Production">
9-
<link rel="stylesheet" href="~/dist/site.css" />
10-
</environment>
8+
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
9+
<link rel="stylesheet" href="~/dist/site.css" asp-append-version="true" />
1110
</head>
1211
<body>
1312
<div class="navbar navbar-inverse navbar-fixed-top">

templates/WebApplicationBasic/package.json

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
"name": "WebApplicationBasic",
33
"version": "0.0.0",
44
"devDependencies": {
5-
"babel-loader": "^6.2.3",
6-
"babel-preset-es2015": "^6.5.0",
75
"bootstrap": "^3.3.6",
86
"css-loader": "^0.23.1",
97
"extendify": "^1.0.0",
@@ -15,8 +13,5 @@
1513
"typescript": "^1.8.2",
1614
"url-loader": "^0.5.7",
1715
"webpack": "^1.12.14"
18-
},
19-
"dependencies": {
20-
"babel-core": "^6.5.2"
2116
}
2217
}

templates/WebApplicationBasic/project.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,9 @@
4242
"**.vspscc"
4343
],
4444
"scripts": {
45-
"prepublish": [
45+
"prepare": [
4646
"npm install",
47+
"webpack --config webpack.config.vendor.js",
4748
"webpack"
4849
]
4950
}

templates/WebApplicationBasic/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"compilerOptions": {
33
"moduleResolution": "node",
4-
"target": "es6",
4+
"target": "es5",
55
"sourceMap": true
66
},
77
"exclude": [
Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
11
module.exports = {
2-
devtool: 'inline-source-map',
3-
module: {
4-
loaders: [
5-
{ test: /\.css/, loader: 'style!css' }
6-
]
7-
}
2+
devtool: 'inline-source-map'
83
};
Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
11
var path = require('path');
22
var webpack = require('webpack');
3+
var ExtractTextPlugin = require('extract-text-webpack-plugin');
34
var merge = require('extendify')({ isDeep: true, arrays: 'concat' });
45
var devConfig = require('./webpack.config.dev');
56
var prodConfig = require('./webpack.config.prod');
67
var isDevelopment = process.env.ASPNET_ENV === 'Development';
8+
var extractCSS = new ExtractTextPlugin('site.css');
79

810
module.exports = merge({
911
resolve: {
1012
extensions: [ '', '.js', '.jsx', '.ts', '.tsx' ]
1113
},
1214
module: {
1315
loaders: [
14-
{ test: /\.ts(x?)$/, include: /ClientApp/, loader: 'babel-loader' },
1516
{ test: /\.ts(x?)$/, include: /ClientApp/, loader: 'ts-loader' },
16-
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
17+
{ test: /\.css/, loader: extractCSS.extract(['css']) }
1718
]
1819
},
1920
entry: {
20-
main: ['./ClientApp/App.ts'],
21-
vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'style-loader', 'jquery']
21+
main: ['./ClientApp/App.ts']
2222
},
2323
output: {
2424
path: path.join(__dirname, 'wwwroot', 'dist'),
2525
filename: '[name].js',
2626
publicPath: '/dist/'
2727
},
2828
plugins: [
29-
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
30-
new webpack.optimize.OccurenceOrderPlugin(),
31-
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js') // Moves vendor content out of other bundles
29+
extractCSS,
30+
new webpack.DllReferencePlugin({
31+
context: __dirname,
32+
manifest: require('./wwwroot/dist/vendor-manifest.json')
33+
})
3234
]
3335
}, isDevelopment ? devConfig : prodConfig);
Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
var webpack = require('webpack');
2-
var ExtractTextPlugin = require('extract-text-webpack-plugin');
3-
var extractCSS = new ExtractTextPlugin('site.css');
42

53
module.exports = {
6-
module: {
7-
loaders: [
8-
{ test: /\.css/, loader: extractCSS.extract(['css']) },
9-
]
10-
},
114
plugins: [
12-
extractCSS,
5+
new webpack.optimize.OccurenceOrderPlugin(),
136
new webpack.optimize.UglifyJsPlugin({ minimize: true })
147
]
158
};
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
var path = require('path');
2+
var webpack = require('webpack');
3+
var ExtractTextPlugin = require('extract-text-webpack-plugin');
4+
var extractCSS = new ExtractTextPlugin('vendor.css');
5+
var isDevelopment = process.env.ASPNET_ENV === 'Development';
6+
7+
module.exports = {
8+
resolve: {
9+
extensions: [ '', '.js' ]
10+
},
11+
module: {
12+
loaders: [
13+
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
14+
{ test: /\.css/, loader: extractCSS.extract(['css']) }
15+
]
16+
},
17+
entry: {
18+
vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'style-loader', 'jquery']
19+
},
20+
output: {
21+
path: path.join(__dirname, 'wwwroot', 'dist'),
22+
filename: '[name].js',
23+
library: '[name]_[hash]',
24+
},
25+
plugins: [
26+
extractCSS,
27+
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
28+
new webpack.optimize.OccurenceOrderPlugin(),
29+
new webpack.DllPlugin({
30+
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
31+
name: '[name]_[hash]'
32+
})
33+
].concat(isDevelopment ? [] : [
34+
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
35+
])
36+
};

0 commit comments

Comments
 (0)
X Tutup