Disable webpack's file watching for vim swp files

Question

Everytime I open file with vim, webpack detects changes and recompiles the code. Vim creates temporary files like .test.txt.swp which makes webpack believe something has changed in the project.

Disabling swp file creation helped, but I would like to remain safe with swp files and not get distracted with browser reloading the page too often, nor with unnecessary code compilation.

How to make webpack know it should not react for .*.swp files changes?

EDIT: It is actually webpack-dev-server which reacts to new vim swap files detected. And it does it only when there are specific entries in source files that are about to be compiled. Examples are from importing angular2, but not only it: import '@angular/core'; import '@angular/common';

Answer 1

I know nothing about "webpack", but you can tell Vim to store swap files in a single directory instead of the current directory with the 'dir' setting. I use this in my vimrc:

set dir=$HOME/.vim/tmp/swap
if !isdirectory(&dir) | call mkdir(&dir, 'p', 0700) | endif

This will also fix issues with other tools, as well as "dangling swap files", swap files in VCS systems, etc.

If you want to ignore Vim swap files in tools (such as webpack) then remember that just ignoring .swp is not enough; Vim may also create swap files with extensions such as .swo, .swn, etc.

Answer 2

You can exclude files based on a pattern:

module: {
  loaders: [
    {
      // existing loader config
      exclude: /\.swp$/,
    },
  ]
}

You shouldn't be bundling everything by default, though; use a loader test to only bundle .js files (or whatever you explicitly needs; .jsx, .css, etc.). Something like this, for example:

module: {
  loaders: [
    {
      test: /.jsx?$/,
      loader: 'babel-loader',
      exclude: [/node_modules/, 'test/', /\.swp$/],
      query: {
        presets: ['es2015', 'react']
      }
    },
    {
      test: /\.css$/,
      loader: "style-loader!css-loader"
    },
  ]
}

Answer 3

The answer for me was the following change in the webpack configuration

<webpackConfObject>.devServer.watchOptions = {
  ignored: /\.sw.$/
};

The exclude attribute of modules does not apply to the file watcher that triggers an event to reload the page on the webpack dev server, but you can ignore files that match a pattern.