<p dir="auto"><a href="https://webpack.github.io/docs/list-of-plugins.html#provideplugin" rel="nofollow">ProvidePlugin</a> can only be used for default exports, the example in the doc is jQuery.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="new webpack.ProvidePlugin({
    $: &quot;jquery&quot;
})"><pre class="notranslate"><span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">ProvidePlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">$</span>: <span class="pl-s">"jquery"</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">However if you're using libraries with named exports, like <code class="notranslate">preact</code> you're out of luck</p>
<p dir="auto">Hello world with preact:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { h, render } from 'preact';

render(
    &lt;span&gt;Hello, world!&lt;/span&gt;,
    document.body
);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">h</span><span class="pl-kos">,</span> <span class="pl-s1">render</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'preact'</span><span class="pl-kos">;</span>

<span class="pl-en">render</span><span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">span</span><span class="pl-c1">&gt;</span>Hello, world!<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">span</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span>
    <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The variable <code class="notranslate">h</code> is never used in the source file but it's needed because babel transpiles jsx into <code class="notranslate">h()</code> calls.</p>
<p dir="auto">Ideally one would only write <code class="notranslate">import { render } from 'preact';</code> and then use <code class="notranslate">ProvidePlugin</code> to inject the import for <code class="notranslate">h</code>.</p>
<p dir="auto">Maybe something like</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="new webpack.ProvidePlugin({
    h: [&quot;preact&quot;, &quot;h&quot;]   // &lt;- module name becomes an array
})"><pre class="notranslate"><span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">ProvidePlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">h</span>: <span class="pl-kos">[</span><span class="pl-s">"preact"</span><span class="pl-kos">,</span> <span class="pl-s">"h"</span><span class="pl-kos">]</span>   <span class="pl-c">// &lt;- module name becomes an array</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">The <a href="https://github.com/developit/preact-boilerplate">preact-boilerplate</a> imports <code class="notranslate">h</code> in every file and then defines an eslint rule to disable the unused error <code class="notranslate">"no-unused-vars": [0, { "varsIgnorePattern": "^h$" }]</code>.</p>
<p dir="auto"><a href="https://github.com/rollup/rollup-plugin-inject">rollup-plugin-inject</a> allows named exports</p>
<p dir="auto">I think it will be suitable to provide version of expression to ProvidePlugin to import PROPERTY of module</p>
<p dir="auto">For example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" new webpack.ProvidePlugin({
                'variable': [&quot;npm-module&quot;,&quot;variable&quot;]
            })"><pre class="notranslate"><code class="notranslate"> new webpack.ProvidePlugin({
                'variable': ["npm-module","variable"]
            })
</code></pre></div>
<p dir="auto">in this case it is resolved as require("npm-module")["variable"]</p>
<p dir="auto"><strong>Webpack version:</strong><br>
2 latest NPM</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 10</p>