Ts-loader: Support question - Infinite webpack watch loop - how to ignore changes to .js files

[ORESoftware]

Hey all, this _is_ working for me, but my webpack -w command using ts-loader is in an infinite loop. I am guessing it's because webpack -w is seeing changes to .js files, so that causes the _loop_:

webpack -w => ts transpile => .js changes => webpack -w

has anyone seen this before? Is the best thing to do to tell webpack -w to ignore .js files?

[ORESoftware]

I filed an issue with Webpack

https://github.com/webpack/webpack/issues/5874

I think perhaps they should have an ignore option with the webpack -w command

[ORESoftware]

I tried this plugin in my webpack.config.js:

  plugins: [
    new webpack.WatchIgnorePlugin([
      /\.js$/
    ])
  ],

same problem - it keeps looping, with no further input from me

[ORESoftware]

ok so I think I figured it out, you have to ignore the .d.ts. files too! (duh)

  plugins: [
    new webpack.WatchIgnorePlugin([
      /\.js$/,
      /\.d\.ts$/
    ])
  ],

IMO this should go in the docs no?

[johnnyreilly]

IMO this should go in the docs no?

I think the way you're using webpack must be kind of niche as it's never been a problem for me and I'm not aware of anyone else reporting as an issue.

I'm kind of assuming that you might be using webpack wrong.. hard to say :puzzled:

[ORESoftware]

@johnnyreilly yeah who knows, but here is my complete config verbatim (it's relatively simple imo):

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

module.exports = {

  entry: ['babel-polyfill', './lib/index.ts'],

  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: 'suman.js'
  },

  plugins: [
    new webpack.WatchIgnorePlugin([
      /\.js$/,
      /\.d\.ts$/
    ])
  ],

  module: {

    rules: [
      // all files with a `.ts` extension will be handled by `ts-loader`
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      },
      {
        test: /^\.d.ts$/,
        loader: 'ignore-loader'
      },
      {
        test: new RegExp('^' + path.resolve(__dirname + '/lib/cli-commands/') + '.*'),
        loader: 'ignore-loader'
      },
      {
        test: new RegExp('^' + path.resolve(__dirname + '/suman.conf.js')),
        loader: 'ignore-loader'
      }
    ],

  },

  resolve: {
    alias: {
      fs: require.resolve('suman-browser-polyfills/modules/fs'),
      process: require.resolve('suman-browser-polyfills/modules/process'),
    },
    // extensions: ['.ts']
    extensions: ['.ts', '.js']
  },

  node: {
    assert: true,
    buffer: false,
    child_process: 'empty',
    cluster: 'empty',
    console: false,
    constants: true,
    crypto: 'empty',
    dgram: 'empty',
    dns: 'mock',
    domain: true,
    events: true,
    // fs: 'empty',
    http: true,
    https: true,
    module: 'empty',
    net: 'mock',
    os: true,
    path: true,
    process: false,
    punycode: true,
    querystring: true,
    readline: 'empty',
    repl: 'empty',
    stream: true,
    string_decoder: true,
    timers: true,
    tls: 'mock',
    tty: true,
    url: true,
    util: true,
    v8: 'mock',
    vm: true,
    zlib: 'empty',
  }
};

and at the command line, all I run is:

webpack --watch

and like I said, I had to add the ignore plugin, to prevent infinite watch looping, and I had to ignore both .d.ts and .js files.

[johnnyreilly]

Thanks! - I've merged the PR

[ORESoftware]

cool thx boss