<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">I use facebook sdk for live video and import fb sdk,  i also have a file named sdk.js, when building with webpack,  the fb sdk file will be add hash.</p>
<ul dir="auto">
<li>
<p dir="auto">Before<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24260845/99479373-03761880-2991-11eb-968c-7f6b46110550.png"><img src="https://user-images.githubusercontent.com/24260845/99479373-03761880-2991-11eb-968c-7f6b46110550.png" alt="image" style="max-width: 100%;"></a></p>
</li>
<li>
<p dir="auto">After<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/24260845/99479812-de35da00-2991-11eb-8530-b43e4ec6b5ef.png"><img src="https://user-images.githubusercontent.com/24260845/99479812-de35da00-2991-11eb-8530-b43e4ec6b5ef.png" alt="image" style="max-width: 100%;"></a></p>
</li>
</ul>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:    v4.41.0<br>
Node.js version:      v12.18.2<br>
Operating System:   mac os<br>
Additional tools:</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>


<p dir="auto"><strong>What is the current behavior?</strong><br>
Uncaught ReferenceError: vendor_dll is not defined<br>
Possibly because output.library Template variables are not replaced<br>
<strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
See below</p>



<p dir="auto"><strong>What is the expected behavior?</strong><br>
No reference errors when using the bundles in browser<br>
[name] replaced<br>
<strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong><br>
Version: webpack 3.4.1<br>
Typescript</p>
<p dir="auto">Currently I have a single DLL, its getting quite big, which means that "time to interactive" when I refresh pages is getting really long<br>
So I thought it may be possible to split the DLL into similar small chunks as my PROD build (pure CommonsChunkPlugin)<br>
Not sure if this is a supported scenario, it was eluded to here:<br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="198951088" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/3783" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/3783/hovercard?comment_id=270655641&amp;comment_type=issue_comment" href="https://github.com/webpack/webpack/issues/3783#issuecomment-270655641">#3783 (comment)</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="199740311" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/3871" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/3871/hovercard" href="https://github.com/webpack/webpack/issues/3871">#3871</a></p>
<p dir="auto">The split I want is, one chunk for homepage, one chunk for standard pages and another chunk for "editing" pages<br>
This seems to work, the DLL compiles, the DLL can be used by DllReferencePlugin without webpack generation errors, the modules are split to the expected files with no duplicatations.<br>
However if I try to use it in the browser, I get a reference failure</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var landingmodules = [
    &quot;react&quot;,
    &quot;react-dom&quot;,
    &quot;react-router&quot;,
];

var mainmodules = landingmodules.concat([
    'redux',
    'redux-saga',
    &quot;immutable&quot;,
]);

var maineditmodules = mainmodules.concat([
    'redux-form',
    &quot;d3&quot;,
]);


const dllconfig: webpack.Configuration = mergesmart(basedllconfig, {
    entry: {
        landing: landingmodules,
        main: mainmodules,
        mainedit: maineditmodules
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: &quot;vendor&quot;,
            filename: 'vendor.js',
            chunks: [&quot;landing&quot;, &quot;main&quot;, &quot;mainedit&quot;],
            minChunks: 3
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: &quot;vendormain&quot;,
            filename: 'vendormain.js',
            chunks: [&quot;main&quot;, &quot;mainedit&quot;],
            minChunks: 2
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: &quot;vendormainedit&quot;,
            filename: 'vendormainedit.js',
            chunks: [&quot;mainedit&quot;],
            minChunks: 1
        }),
    ],
});

const basedllconfig: webpack.Configuration = {
    output: {
        path: path.resolve(&quot;./output/webpack-dll/dev&quot;),
        filename: '[name].js', //file gets created as vendor.js correctly
        library: '[name]_dll', //[chunkhash] - gets replaced with &quot;chunkhash&quot;, [hash] - throws an error
    },
    plugins: [
        new (webpack as any).DllPlugin({
            path: path.join(&quot;output&quot;, &quot;/webpack-dll/dev&quot;, &quot;[name]-manifest.json&quot;), //file gets created as vendor.manifest.json correctly
            name: '[name]_dll'
            context: &quot;.&quot;
        })
    ],
}"><pre class="notranslate"><code class="notranslate">var landingmodules = [
    "react",
    "react-dom",
    "react-router",
];

var mainmodules = landingmodules.concat([
    'redux',
    'redux-saga',
    "immutable",
]);

var maineditmodules = mainmodules.concat([
    'redux-form',
    "d3",
]);


const dllconfig: webpack.Configuration = mergesmart(basedllconfig, {
    entry: {
        landing: landingmodules,
        main: mainmodules,
        mainedit: maineditmodules
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename: 'vendor.js',
            chunks: ["landing", "main", "mainedit"],
            minChunks: 3
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendormain",
            filename: 'vendormain.js',
            chunks: ["main", "mainedit"],
            minChunks: 2
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendormainedit",
            filename: 'vendormainedit.js',
            chunks: ["mainedit"],
            minChunks: 1
        }),
    ],
});

const basedllconfig: webpack.Configuration = {
    output: {
        path: path.resolve("./output/webpack-dll/dev"),
        filename: '[name].js', //file gets created as vendor.js correctly
        library: '[name]_dll', //[chunkhash] - gets replaced with "chunkhash", [hash] - throws an error
    },
    plugins: [
        new (webpack as any).DllPlugin({
            path: path.join("output", "/webpack-dll/dev", "[name]-manifest.json"), //file gets created as vendor.manifest.json correctly
            name: '[name]_dll'
            context: "."
        })
    ],
}
</code></pre></div>
<p dir="auto">Looking at the generated bundles I see that the [name] was not replaced</p>
<p dir="auto">landing.js</p>
<blockquote>
<p dir="auto">var landing_dll =<br>
webpackJsonp_name__dll([1],</p>
</blockquote>
<p dir="auto">main.js</p>
<blockquote>
<p dir="auto">var main_dll =<br>
webpackJsonp_name__dll([0]</p>
</blockquote>
<p dir="auto">mainedit.js</p>
<blockquote>
<p dir="auto">var mainedit_dll =<br>
webpackJsonp_name__dll([2]</p>
</blockquote>
<p dir="auto">vendor.js</p>
<blockquote>
<p dir="auto">/<strong>/ (function(modules) { // webpackBootstrap<br>
/</strong>/ 	// install a JSONP callback for chunk loading<br>
/<strong>/ 	var parentJsonpFunction = window["webpackJsonp_name__dll"];<br>
/</strong>/ 	window["webpackJsonp_name__dll"] = function webpackJsonpCallback</p>
</blockquote>
<p dir="auto">vendormain.js</p>
<blockquote>
<p dir="auto">webpackJsonp_name__dll([3],</p>
</blockquote>
<p dir="auto">vendoredit.js</p>
<blockquote>
<p dir="auto">webpackJsonp_name__dll([5]</p>
</blockquote>
<p dir="auto">Looks like it could be a similar to these</p>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="45554503" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/527" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/527/hovercard" href="https://github.com/webpack/webpack/issues/527">#527</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="134515469" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/2066" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/2066/hovercard" href="https://github.com/webpack/webpack/issues/2066">#2066</a></p>
<p dir="auto">Tried the alternative syntax, however that didnt work either:</p>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="30845047" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/221" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/221/hovercard?comment_id=39642737&amp;comment_type=issue_comment" href="https://github.com/webpack/webpack/issues/221#issuecomment-39642737">#221 (comment)</a><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="90590264" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/1189" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/1189/hovercard?comment_id=259919350&amp;comment_type=issue_comment" href="https://github.com/webpack/webpack/issues/1189#issuecomment-259919350">#1189 (comment)</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    output: {
        path: path.resolve(&quot;./output/webpack-dll/dev&quot;),
        filename: '[name].js',
        library: [&quot;DLL&quot;, &quot;[name]&quot;],
    },"><pre class="notranslate"><code class="notranslate">    output: {
        path: path.resolve("./output/webpack-dll/dev"),
        filename: '[name].js',
        library: ["DLL", "[name]"],
    },
</code></pre></div>
<blockquote>
<p dir="auto">/<strong>/ (function(modules) { // webpackBootstrap<br>
/</strong>/ 	// install a JSONP callback for chunk loading<br>
/<strong>/ 	var parentJsonpFunction = window["webpackJsonpDLL__name_"];<br>
/</strong>/ 	window["webpackJsonpDLL__name_"]</p>
</blockquote>