Add a plugin to webpack-chain config

user_7438212 0
Viewed 3265

I'm trying to add the @babel/plugin-transform-classes to a webpack configuration. I've installed the NPM module and tried to activate it using the following configuration:

const transform = require.resolve("@babel/plugin-transform-classes")
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
                options['transformAssetUrls'] = {
                    img: 'src',
                    image: 'xlink:href'
                }

                return options
            });
        config.plugin('transform')
            .use(transform, [])
    }
}

This generates the following error:

error WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
         - configuration.plugins[13] misses the property 'apply'.
           function
           -> The run point of the plugin, required method.

How should I modify the above to correctly load the plugin?

babeljs webpack
1 Answers

You seems to use correct method of "webpack-chain". Probably you cannot use Babel plugin as webpack plugin, you should use it in babel config. See docs: https://babeljs.io/docs/en/babel-plugin-transform-classes#usage

// without options
{
  "plugins": ["@babel/plugin-transform-classes"]
}

// with options
{
  "plugins": [
    ["@babel/plugin-transform-classes", {
      "loose": true
    }]
  ]
}

I was able to add plugin in my vue config same way you are using it:

  chainWebpack: config => {
      config.plugin('analyse').use(
        BundleAnalyzerPlugin,
        [{
          analyzerHost: '0.0.0.0',
        }]
      );
  },
user_8616150
Related