Loading jQuery plugins with webpack 2

Question

After spending most of the day googling and trying - i did not get it to work and at this point i'm not sure what's missing.
I already have jQuery working (and verified it works) in webpack.common.js:

new ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    }) 

For example i have a "MetisMenu" plugin, where should i configure it?

I tried various combinations of require/include in my app.module.ts.
Like (including assigning them to a constant/var but import/require always give this error):

import 'metismenu';
jQuery(...).metisMenu is not a function

import { metisMenu } from 'metismenu';
Cannot assign to read only property 'exports' of object '#<Object>'

require ('metismenu');
Cannot assign to read only property 'exports' of object '#<Object>'

import * as jQuery from 'jquery';
import "metismenu";
Cannot assign to read only property 'exports' of object '#<Object>'

Answer 1

I was faced to the same problem. I can't bundle Jquery and external plugin with webpack 2.

So I "solved" partially using externals options of webpack.

I Link CDN library (jquery and other jquery plugin).

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js" crossorigin="anonymous"></script>

I specify "externals" option on my webpack.config

externals: {
    jquery: 'jQuery'
}

And add the ProvidePlugin

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })

In the app file, I import jquery and use the plugin like this

 import * as $ from 'jquery';
 $('.accordion').accordion();

I appreciate if someone can tell me how to bundle jQuery with Webpack 2