Skip to content

Instantly share code, notes, and snippets.

Created Sep 13, 2017
What would you like to do?
Webpack CommonsChunkPlugin issue
import c from "./c";
export default "a" + c;
import c from "./c";
export default "b" + c;
export default "c";
export default "d";
//A and B are largely the same code (shared dependency on C)
require.ensure([], (require) => {
const a = require("./a").default;
console.log("Got a", a)
}, "aChunk");
require.ensure([], (require) => {
const b = require("./b");
console.log("Got b", b)
}, "bChunk");
// D is unrelated to A or B (no shared code), but prevents any code from being extracted from A or B
require.ensure([], (require) => {
const d = require("./d");
console.log("Got d", d);
}, "dChunk");
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./main",
output: {
filename: "bundle.js",
chunkFilename: "[name].bundle.js",
path: path.resolve("dist")
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "main",
async: "common"

This comment has been minimized.

Copy link
Owner Author

@Retsam Retsam commented Sep 13, 2017

Running this as is, I expect to see common code from aChunk and bChunk to have been extracted, but it hasn't:

           Asset       Size  Chunks             Chunk Names
bChunk.bundle.js  601 bytes       0  [emitted]  bChunk
aChunk.bundle.js  601 bytes       1  [emitted]  aChunk
dChunk.bundle.js  271 bytes       2  [emitted]  dChunk
       bundle.js    6.51 kB       3  [emitted]  main

If I comment out lines 13-16 (where d is required), however, I get the expected behavior:

common.bundle.js  190 bytes       0  [emitted]  common
bChunk.bundle.js  411 bytes       1  [emitted]  bChunk
aChunk.bundle.js  417 bytes       2  [emitted]  aChunk
       bundle.js    6.51 kB       3  [emitted]  main
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment