Webpacker: Ignoring files?

[cgs]

Is there a good way to ignore/exclude files on the dev server? Webpack keeps choking on my emacs backup files, such as "foo.vue~". I'd like to ignore _all_ files ending in "~" but I'm not sure how to do it.

I tried adding watchOptions.ignored to config/webpack/development.js to no avail:

module.exports = merge(sharedConfig, {
  devtool: 'sourcemap',

  stats: {
    errorDetails: true
  },

  output: {
    pathinfo: true
  },

  watchOptions: {
    ignored: "**/*~"
  }
})

Is something like the ignore-loader plugin necessary for this?

[ZackMattor]

I thought you could use the exclude option and pass it some regex?

(not tested at all....)

exclude: [
  /(~$)/,
]

https://webpack.js.org/configuration/module/#condition

[gauravtiwari]

@cgs Could you please try what Zack suggested? We should probably add some excludes by default, but I guess that still won't be one size fits all (may be a config option would be better).

[cgs]

@gauravtiwari Trying the above:

11:08:14 webpack.1 | Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
11:08:14 webpack.1 |  - configuration has an unknown property 'exclude'. These properties are valid:
11:08:14 webpack.1 |    object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
11:08:14 webpack.1 |    For typos: please correct them.
11:08:14 webpack.1 |    For loader options: webpack 2 no longer allows custom properties in configuration.
11:08:14 webpack.1 |      Loaders should be updated to allow passing options via loader options in module.rules.
11:08:14 webpack.1 |      Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
11:08:14 webpack.1 |      plugins: [
11:08:14 webpack.1 |        new webpack.LoaderOptionsPlugin({
11:08:14 webpack.1 |          // test: /\.xxx$/, // may apply this only for some modules
11:08:14 webpack.1 |          options: {
11:08:14 webpack.1 |            exclude: ...
11:08:14 webpack.1 |          }
11:08:14 webpack.1 |        })
11:08:14 webpack.1 |      ]

So, I tried this in app/config/webpack/shared.js:

  plugins: [
    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
    new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
    new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true }),
    new webpack.LoaderOptionsPlugin({
      options: {
        exclude: /(~$)/
      }
    })

  ],

No dice there either. Sorry, new to webpack so I'm a bit lost!

[gauravtiwari]

I think you would need to add that to loaders/vue.js

{
  test: /\.vue$/,
  // rest of the config
  exclude: [
    /(~$)/
  ]
}

[gauravtiwari]

BTW, no need of LoaderOptionsPlugin

[ZackMattor]

Yeah, it should be per-loader that you can add exclusions. I agree there should be a concept of global settings that each loader could inherit off of?... (Just thinking out loud)

[cgs]

@gauravtiwari @ZackMattor My vue loader:

module.exports = {
  test: /\.vue~?$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader',
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
    }
  },
  exclude: [
    /vue~$/
  ]
}

It's still not excluding the file. It's still not clear to me if the pattern I want to exclude needs to be in "test" _and_ "exclude" or just "exclude." I tried both.

On a separate note, even if this worked I'd need to do the same thing in the babel loader I'd guess for js files.

[gauravtiwari]

module.exports = {
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader',
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
    }
  },
  exclude: [
    /(~$)/
  ]
}

@cgs Please try the above loader 👍

[cgs]

Still not working.

[gauravtiwari]

Alright, just tested it out and think the problem is you need a new loader that test for that extension. Sorry for back and forth. So, what you need to do is -

yard add ignore-loader

// loaders/ignores.js
module.exports = {
  test: /.vue~$/,
  loader: 'ignore-loader'
}

[cgs]

@gauravtiwari Success! 👍 I had installed that at one point but was not using it correctly. Would adding something to the readme about this be helpful?

[gauravtiwari]

Document this in README/guide - #372