Bob Bob - 20 days ago 7
TypeScript Question

Webpack Not Rebuilding on Change

For some reason I can't get webpack to rebuild my files on change. I basically followed the Browsersync - Webpack + TypeScript Recipe.

My

webpack.config.js
:

let path = require('path');
let webpack = require('webpack');

let config = {
debug: true,
devtool: 'eval',
entry: './app/index.ts',
output: {
publicPath: '/',
path: path.join(__dirname, 'wwwroot'),
filename: 'bundle.js'
},
plugins: [],
resolve: {
extensions: ['', '.ts', '.js']
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts', include: path.join(__dirname, 'app') }
]
}
};
module.exports = config;


My browser-sync configuration (
server.js
) which I literally copied from the recipe:

var browserSync = require('browser-sync').create();
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var stripAnsi = require('strip-ansi');
var webpackConfig = require('./webpack.config');
var bundler = webpack(webpackConfig);

bundler.plugin('done', function (stats) {
if (stats.hasErrors() || stats.hasWarnings()) {
return browserSync.sockets.emit('fullscreen:message', {
title: "Webpack Error:",
body: stripAnsi(stats.toString()),
timeout: 100000
});
}
browserSync.reload();
});

browserSync.init({
server: 'wwwroot',
open: false,
logFileChanges: false,
middleware: [
webpackDevMiddleware(bundler, {
publicPath: webpackConfig.output.publicPath,
stats: {colors: true}
})
],
plugins: ['bs-fullscreen-message'],
files: [
]
});


And to start it all i simply use the npm scripts section:

"scripts": {
"build": "node server"
},


Whenever I change a typescript file in
app/
nothing happens.
What am I doing wrong here?

Bob Bob
Answer

Fixed it by explicitly adding watch section to webpack dev middleware configuration.