TypeScript watch mode #328
Description
TypeScript watch mode compilation doesn't seem to be working for me. Hot module reloading is - changes to .html or .scss files are triggering an update in the browser. But modifying typescript files doesn't seem to regenerate any javascript, so there are no UI updates.
I can get the typescript to compile a change to a .cs file, then triggering a Visual Studio build, which makes me suspect webpack has nothing to do with it at all, and the compilation is just some VS built-in magic. I am also able to get HMR working with TypeScript by running tsc -w -p . in the project directory, in a separate window, but that's not an ideal workflow. And it's not actually clear to me why HMR is even working in this case, since I don't have an explicit .js loader.
If it helps, this is my webpack.config.js - it's pretty much the default one for an angular spa, with an additional sass loader:
var path = require('path');
var webpack = require('webpack');
var merge = require('extendify')({ isDeep: true, arrays: 'concat' });
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('styles.css');
var devConfig = require('./webpack.config.dev');
var prodConfig = require('./webpack.config.prod');
var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';
module.exports = merge({
resolve: {
extensions: [ '', '.js', '.ts' ]
},
module: {
loaders: [
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader' },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css/, loader: extractCSS.extract(['css']) },
{ test: /\.scss/, loader: "style!css!sass" }
]
},
entry: {
main: ['./ClientApp/boot-client.ts']
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
filename: '[name].js',
publicPath: '/dist/'
},
plugins: [
extractCSS,
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
})
]
}, isDevelopment ? devConfig : prodConfig);