Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

TypeScript watch mode #328

Description

@mmkal

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);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions