DllPlugin with CommonsChunkPlugin ReferenceError: vendor_dll is not defined

Do you want to request a feature or report a bug? Bug

What is the current behavior? Uncaught ReferenceError: vendor_dll is not defined Possibly because output.library Template variables are not replaced If the current behavior is a bug, please provide the steps to reproduce. See below

What is the expected behavior? No reference errors when using the bundles in browser [name] replaced If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System. Version: webpack 3.4.1 Typescript

Currently I have a single DLL, its getting quite big, which means that “time to interactive” when I refresh pages is getting really long So I thought it may be possible to split the DLL into similar small chunks as my PROD build (pure CommonsChunkPlugin) Not sure if this is a supported scenario, it was eluded to here: https://github.com/webpack/webpack/issues/3783#issuecomment-270655641 https://github.com/webpack/webpack/issues/3871

The split I want is, one chunk for homepage, one chunk for standard pages and another chunk for “editing” pages 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. However if I try to use it in the browser, I get a reference failure

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: "."
        })
    ],
}

Looking at the generated bundles I see that the [name] was not replaced

landing.js

var landing_dll = webpackJsonp_name__dll([1],

main.js

var main_dll = webpackJsonp_name__dll([0]

mainedit.js

var mainedit_dll = webpackJsonp_name__dll([2]

vendor.js

// (function(modules) { // webpackBootstrap // // install a JSONP callback for chunk loading // var parentJsonpFunction = window[“webpackJsonp_name__dll”]; // window[“webpackJsonp_name__dll”] = function webpackJsonpCallback

vendormain.js

webpackJsonp_name__dll([3],

vendoredit.js

webpackJsonp_name__dll([5]

Looks like it could be a similar to these

https://github.com/webpack/webpack/issues/527 https://github.com/webpack/webpack/issues/2066

Tried the alternative syntax, however that didnt work either:

https://github.com/webpack/webpack/issues/221#issuecomment-39642737 https://github.com/webpack/webpack/issues/1189#issuecomment-259919350

    output: {
        path: path.resolve("./output/webpack-dll/dev"),
        filename: '[name].js',
        library: ["DLL", "[name]"],
    },

// (function(modules) { // webpackBootstrap // // install a JSONP callback for chunk loading // var parentJsonpFunction = window[“webpackJsonpDLL__name_”]; // window[“webpackJsonpDLL__name_”]

[sokra]

Why is this not supported?

Nobody implemented it…

---

Just omit the CommonsChunkPlugins

[webpack-bot]

This issue had no activity for at least half a year.

It’s subject to automatic issue closing if there is no activity in the next 15 days.