Webpack не перестраивается при изменении

Question

По какой-то причине я не могу заставить веб-пакет перестроить мои файлы при изменении. Я в основном следовал за Browsersync - Webpack + TypeScript Recipe.

мой 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;

Моя конфигурация синхронизации браузера (server.js) которую я буквально скопировал из рецепта:

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: [
    ]
});

И чтобы начать все это, я просто использую раздел сценариев npm:

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

Всякий раз, когда я изменяю файл машинописи в app/ Ничего не произошло. Что я здесь не так делаю?

Answer 1

Исправлено путем явного добавления секции watch в конфигурацию промежуточного программного обеспечения разработчика webpack.

Как и было запрошено, это изменение конфигурации:

browserSync.init({
  ...
  middleware: [
    webpackDevMiddleware(bundler, {
      // Explicitly set watch options:
      watchOptions: {
        aggregateTimeout: 300,
        poll: true
      }
    })
  ]
});

Answer 2

Не прямой ответ, но оставив это здесь на случай, если это может помочь кому-то еще:

При редактировании определенного файла в моем проекте (обратите внимание на корпус) я столкнулся со странной проблемой, когда веб-пакет перестраивал файл только при первом сохранении изменений, но не при втором, третьем, четвертом и т. д.

Проблема заключалась в том, что файл, который я редактировал, был импортирован файлом следующим образом. (Оба файла находятся в одном каталоге)

      // main.tsx
import App from "./App";  // Stupid casing typo!
//...
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

Интересно, что компиляция всегда удавалась на Windows и Unix, несмотря на различия в регистре.

Как только я изменил оператор импорта вmain.tsxк следующему, я смог отредактироватьapp.tsx, сохраните изменения, и каждый раз webpack будет правильно перестраиваться:

      import App from "./app";