CODEWITHSUNDEEP
webpackwebpack-dev-server
osolmaz
osolmaz

Reputation: 1923

Ignoring files with Webpack Dev Server

I am using Emacs to edit the files in directories watched by Webpack's development server. Every time I make a change in a file, a backup file gets created in the same directory, like .#original_filename, even though I did not save the changes in Emacs. This causes the server's watcher to register a change even though I did not make one. Hence the server reloads every time I make a change in the file, and then does another reload when I save it.

This is somewhat confusing and time consuming. Looking at Webpack's documentation, I found out about the following option:

For some systems, watching many file systems can result in a lot of CPU or memory usage. It is possible to exclude a huge folder like node_modules:

ignored: /node_modules/

It is also possible to use anymatch patterns:

ignored: "files/**/*.js"

So I modified my config like below, to match and ignore the files starting with .:

devServer: {
    ...
    watchOptions: {
        ignored: './src/app/**/.*',
    },
    ...
}

I restart the dev server, but the watcher still registers the backup files as changes done to the codebase. What am I doing wrong?

Upvotes: 15

Views: 14925

Answers (3)

Bae
Bae

Reputation: 7624

Another option is to configure Emacs to write its backup files somewhere else. This is normally a good thing to do anyway.

configure window-setup-hook

;; deleting old backups
(defun my-delete-old-backups ()
  (let* ((backup-directory (expand-file-name
                            (concat user-emacs-directory "backups")))
         (auto-save-directory (concat backup-directory "/\\1")))
    (setq backup-by-copying t)      ; don't clobber symlinks
    ;; Write backup files to own directory
    (setq backup-directory-alist `(("." . ,backup-directory)))
    ;; auto-save files to same backup-directory
    (setq auto-save-file-name-transforms `((".*" ,auto-save-directory t)))
    ;; Make backups of files, even when they're in version control
    (setq vc-make-backup-files t)
    (setq delete-old-versions t)
    (message "Deleting old backup files...")
    (let ((week (* 60 60 24 7))
          (current (float-time (current-time))))
      (dolist (file (directory-files backup-directory t)) ;
        (when (and (backup-file-name-p file)
                   (> (- current (float-time (fifth (file-attributes file))))
                      week))
          (message "%s" file)
          (delete-file file))))
    (message "Deleting old backup files...done")
    (message nil)))
(add-hook 'window-setup-hook #'my-delete-old-backups)

The important bits extracted out:

(setq backup-directory (expand-file-name
                            (concat user-emacs-directory "backups"))
(setq backup-directory-alist `(("." . ,backup-directory)))

Upvotes: 0

monssef
monssef

Reputation: 1004


the proper way to do it would be to use node's native module path
your webpack.config.js should look something like this:

const path = require('path')

module.exports = {
  ...
  devServer: {
    watchOptions: {
      ignored: [
        path.resolve(__dirname, 'dist'),
        path.resolve(__dirname, 'node_modules')
      ]
    }
  },
  ...
}

Upvotes: 12

osolmaz
osolmaz

Reputation: 1923

I found out a solution that works after trying a couple of times. For some reason, it doesn't work when there is ./ at the beginning, which should just mean the current directory.

Changing the matching pattern to the following works:

watchOptions: {
    ignored: '**/.*',
},

Upvotes: 3

Related Questions