Download jQuery plugins with webpack 2

Question

After spending most of the day in search engines and trying - I did not get it to work, and at the moment I am not sure what is 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 plugin "MetisMenu", where to configure it?

I tried various combinations require/includein my .module.ts application.
Similarly (including assigning them 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

It looks like webpack.ProvidePlugin makes anyway declared global variables immutable in Webpack 2.

jQuery , jQuery ( , jQuery, $.fn.).

, jQuery "", , :

((root, factory) => {
    // AMD. Register as an anonymous module.
    define([
        'modernizr'
    ], factory);
})(this, (Modernizr) => {

    // Do the requires here instead of doing it on the main file

    // Fix broken $.animate so Slick can work with
    require('./animatePolyfill');

    // Inject carousel there
    require('slick-carousel');

    class Core extends PluginBase {
    ...

Answer 2

. JQuery webpack 2.

, "" webpack.

CDN (jquery jquery).

<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>

"externals" webpack.config

externals: {
    jquery: 'jQuery'
}

ProvidePlugin

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

jquery

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

, - , jQuery Webpack 2

Answer 3

?

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

Answer 4

, webpack 2, expose-loader.

Install load-loader first:

npm install expose-loader --save-dev

Then, when changing your import (or need), use the following syntax:

import "expose-loader?$!jquery";