Exclude files such as app.html~ and #app.html

Question

When I'm editing src/app.html in Aurelia's skeleton-navigation/skeleton-typescript-webpack, webpack fails with the following error.

WARNING in ./src/app.html~
Module parse failed: /Users/foo/skeleton-test/src/app.html~ Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

How do I exclude files such as app.html~ and #app.html generated by Emacs as backups?

I added plugins: entry in webpack.config.ts, but it did not work.

...
import * as webpack from 'webpack';
...

let config = generateConfig(
  {
    entry: {
      'app': ['./src/main' /* this is filled by the aurelia-webpack-plugin */],
      'aurelia-bootstrap': coreBundles.bootstrap,
      'aurelia': coreBundles.aurelia.filter(pkg => coreBundles.bootstrap.indexOf(pkg) === -1)
    },
    output: {
      path: outDir,
    },
    plugins: [
       new webpack.LoaderOptionsPlugin({
         options: {
            exclude: [ /.*~$/, /.*#.*/ ],
         }
       })
     ]
  },

score 1 · Answer 1 · edited May 23 '17 at 12:00

Webpack only includes files that are actually used in your app. Usually you have an entry point that imports everything that is needed, and only those files and their dependencies are actually included, everything else is just ignored. Unfortunately the aurelia-webpack-plugin decides to include everything in your src/ directory as part of the entry, which is quite frankly not a very good idea. It doesn't look like aurelia-webpack-plugin has an option to exclude some files. Judging from the GitHub issue Add a switch to disable filling the app context with all files from src #72, such a feature was planned but seems to not have been realised.

Anyway, you can't tell webpack to exclude something you explicitly require (in this case the plugin you're using, not yourself), just how to handle it. And what you've tried with excluding them from loaders would make things even worse because that just means those files shouldn't be processed by a loader but just included as they are, which doesn't work because it's not valid JavaScript.

Thankfully those files you want to exclude are related to your editor and the simplest solution is to configure it to store those backup files somewhere else instead of the current directory, which is preferred by most people anyway. For Emacs specifically you can have a look at How do I control how Emacs makes backup files?.

I'm not on our Webpack team, but I know we're getting close to releasing a complete rewrite of our Webpack plugin and skeleton. I'm not sure if it addresses the issues you've mentioned here, but I'll point someone on the team here to address the comments. — Ashley Grant, Mar 02 '17 at 18:13

Exclude files such as app.html~ and #app.html

1 Answers1