How to use Webpack IgnorePlugin

[CITjakob]

Hey everybody

I read about this issues in other threads already (e.g. here #12492) but could not find an answer anywhere.

I need to make the Webpack IgnorePlugin (https://webpack.js.org/plugins/ignore-plugin/) work with quasar, but when adding it to the quasar.conf.js I always get errors I am not able to solve.

Here is what I added at build:

chainWebpack(chain) {
  const IgnorePlugin = require('ignore-webpack-plugin')
    chain.plugin('ignore-webpack-plugin')
      .use(IgnorePlugin, [{
        resourceRegExp: /^\.json$/,
        contextRegExp: /boot$/,
      }])
…
}

As far as I understand the docs for Quasar and Webpack, this way my imports of any JSON files inside the boot directory should be ignored by Webpack. However I get the following error:

…/node_modules/webpack-chain/src/Plugin.js:80
      Object.defineProperties(config, {
             ^

TypeError: Cannot redefine property: __pluginArgs
    at Function.defineProperties (<anonymous>)

I realize this is because the plugin is loaded twice and on the second run it cannot set the __pluginArgs property on the config in node_modules/webpack-chain/src/Plugin.js:83 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_redefine_property)

When I fix this error (by adding configurable: true) to test it, I then get the following errors:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[1].plugins[6] misses the property 'apply'. Should be:
   function
   -> The run point of the plugin, required method.
 - configuration[2].plugins[9] misses the property 'apply'. Should be:
   function
   -> The run point of the plugin, required method.

So to me it looks like it's not possible to configure the ignore-webpack-plugin via the quasar.conf.js correctly. I could not find a way to keep webpack from bundling JSON files I import dynamically even though the resulting js bundles are not used anywhere.

Any help would be highly appreciated.

[kigawas]

You can check this: #1955

const webpack = require('webpack')
module.exports = configure(function (ctx) {
  return {
    build: {
      extendWebpack (cfg) {
        cfg.plugins.push(
          new webpack.ProvidePlugin({
            $: 'jquery'
          })
        )
      }
    },
})