Switch to Webpack

This commit is contained in:
SteveSandersonMS
2016-02-23 13:48:07 +00:00
parent 30cb9d3fa3
commit 0c5eabc022
18 changed files with 104 additions and 105 deletions

View File

@@ -0,0 +1,3 @@
{
"presets": ["es2015"]
}

View File

@@ -1,3 +0,0 @@
{
"directory": "wwwroot/lib"
}

View File

@@ -24,8 +24,7 @@ bld/
# Visual Studio 2015 cache/options directory
.vs/
# Uncomment if you have tasks that create the project's static files in wwwroot
#wwwroot/
/wwwroot/dist/
# MSTest test Results
[Tt]est[Rr]esult*/

View File

@@ -0,0 +1,5 @@
import 'bootstrap/dist/css/bootstrap.css';
import './css/site.css';
// Replace with your TypeScript code
console.log('Hello, world!');

View File

@@ -108,3 +108,7 @@
</ul>
</div>
</div>
@section scripts {
<script src="~/dist/main.js" asp-append-version="true"></script>
}

View File

@@ -5,15 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebApplicationBasic</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/dist/site.css" />
</environment>
</head>
<body>
@@ -45,23 +38,7 @@
</footer>
</div>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
<script src="~/dist/vendor.js" asp-append-version="true"></script>
@RenderSection("scripts", required: false)
</body>
</html>

View File

@@ -1,10 +0,0 @@
{
"name": "WebApplicationBasic",
"private": true,
"dependencies": {
"bootstrap": "3.3.5",
"jquery": "2.1.4",
"jquery-validation": "1.14.0",
"jquery-validation-unobtrusive": "3.2.4"
}
}

View File

@@ -1,47 +0,0 @@
/// <binding Clean='clean' />
"use strict";
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify");
var webroot = "./wwwroot/";
var paths = {
js: webroot + "js/**/*.js",
minJs: webroot + "js/**/*.min.js",
css: webroot + "css/**/*.css",
minCss: webroot + "css/**/*.min.css",
concatJsDest: webroot + "js/site.min.js",
concatCssDest: webroot + "css/site.min.css"
};
gulp.task("clean:js", function (cb) {
rimraf(paths.concatJsDest, cb);
});
gulp.task("clean:css", function (cb) {
rimraf(paths.concatCssDest, cb);
});
gulp.task("clean", ["clean:js", "clean:css"]);
gulp.task("min:js", function () {
return gulp.src([paths.js, "!" + paths.minJs], {
base: "."
})
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
gulp.task("min:css", function () {
return gulp.src([paths.css, "!" + paths.minCss])
.pipe(concat(paths.concatCssDest))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
gulp.task("min", ["min:js", "min:css"]);

33
templates/WebApplicationBasic/package.json Executable file → Normal file
View File

@@ -1,11 +1,22 @@
{
"name": "WebApplicationBasic",
"version": "0.0.0",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-concat": "2.5.2",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"rimraf": "2.2.8"
}
}
{
"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",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"jquery": "^2.2.1",
"style-loader": "^0.13.0",
"ts-loader": "^0.8.1",
"typescript": "^1.8.2",
"url-loader": "^0.5.7",
"webpack": "^1.12.14"
},
"dependencies": {
"babel-core": "^6.5.2"
}
}

View File

@@ -34,11 +34,9 @@
"exclude": [
"wwwroot",
"node_modules",
"bower_components"
],
"publishExclude": [
"node_modules",
"bower_components",
"**.xproj",
"**.user",
"**.vspscc"
@@ -46,9 +44,7 @@
"scripts": {
"prepublish": [
"npm install",
"bower install",
"gulp clean",
"gulp min"
"webpack"
]
}
}

View File

@@ -0,0 +1,10 @@
{
"compilerOptions": {
"moduleResolution": "node",
"target": "es6",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}

View File

@@ -0,0 +1,8 @@
module.exports = {
devtool: 'inline-source-map',
module: {
loaders: [
{ test: /\.css/, loader: 'style!css' }
]
}
};

View File

@@ -0,0 +1,33 @@
var path = require('path');
var webpack = require('webpack');
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';
module.exports = merge({
resolve: {
extensions: [ '', '.js', '.jsx', '.ts', '.tsx' ]
},
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' }
]
},
entry: {
main: ['./ClientApp/App.ts'],
vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'style-loader', 'jquery']
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
filename: '[name].js',
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
]
}, isDevelopment ? devConfig : prodConfig);

View File

@@ -0,0 +1,15 @@
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.UglifyJsPlugin({ minimize: true })
]
};

View File

@@ -1 +0,0 @@
body{padding-top:50px;padding-bottom:20px}.body-content{padding-left:15px;padding-right:15px}input,select,textarea{max-width:280px}.carousel-caption p{font-size:20px;line-height:1.4}

View File

@@ -1 +0,0 @@
// Write your Javascript code.