How can you use CommonsChunkPlugin in Webpack to bundle multiple entries into common chunks?

Question

How can you use CommonsChunkPlugin in Webpack to bundle multiple entries into common chunks?

If I have two pages named Page1 and Page2, both utilizing libraries like jquery and backbone that I want to combine into a single file, with shared modules (excluding the vendors) in another file, here is the webpack configuration:

Some example code here...

However, under this configuration:

common.js contains webpack runtime,

page1.js includes page1 specific modules as well as shared modules

page2.js includes page2 specific modules as well as shared modules

This leads to duplication of code in page1.js and page2.js.

Attempting to improve this, I adjusted the configuration as follows:

Updated code snippet...

After making these changes:

common.js now consists of webpack runtime, vendor libraries, and shared modules

vendor.js contains the webpack runtime and vendor libraries only.

page1.js includes page1 specific modules

page2.js includes page2 specific modules

While this seems like progress, the inclusion of vendors in common.js may not be desired.

Is there something incorrect in this setup?

javascript webpack

Answer 1

Answer №1

To create multiple common chunk bundles, you'll need to provide detailed information for each common bundle as demonstrated in this example:

var config = {

    entry: {
        vendor: ["backbone", "underscore"],
        common: "./app/pages/common/entry.js",
        page1: "./app/pages/page1/entry.js",
        page2: "./app/pages/page2/entry.js"
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            chunks: ["vendor"]
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "common",
            chunks: ["common"]
        })        
    ]
};

Remember that the chunks parameter of the CommonsChunkPlugin should match the names of the entries you are targeting. If you want to separate out the code for 'vendor' and 'common', be sure to specify that only the 'vendor' entry should be included in the 'vendor' common chunk, and the same for the 'common' entry.

Answer 2

To create multiple common chunk bundles, you'll need to provide detailed information for each common bundle as demonstrated in this example:

var config = {

    entry: {
        vendor: ["backbone", "underscore"],
        common: "./app/pages/common/entry.js",
        page1: "./app/pages/page1/entry.js",
        page2: "./app/pages/page2/entry.js"
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            chunks: ["vendor"]
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "common",
            chunks: ["common"]
        })        
    ]
};

Remember that the chunks parameter of the CommonsChunkPlugin should match the names of the entries you are targeting. If you want to separate out the code for 'vendor' and 'common', be sure to specify that only the 'vendor' entry should be included in the 'vendor' common chunk, and the same for the 'common' entry.

How can you use CommonsChunkPlugin in Webpack to bundle multiple entries into common chunks?

Answer №1

Similar questions

The color of the progress bar in JS is not displaying properly

Generate a Flask template using data retrieved from an Ajax request

After compiling, global variables in Vue.js 2 + Typescript may lose their values

What could be the issue with trying to bind an event handler in this manner?

Identifying when the mouse cursor changes on a website

My goal is to provide flexibility in updating values through the use of radio buttons, dropdown menus, lists, and other input methods

Ways to minimize an array using group by

Global Redirect Pro is a cutting-edge redirection tool that

Unable to find the import "@mui/x-charts/PieChart" in the file "src/components/Pie/Pie.jsx". Could the file be missing or spelled incorrectly?

Access all the properties of an object within a mongoose record

Differences between the http module and Express framework

When using the `console.log()` function in JavaScript, the table formatting may

Module request: How can I save the gathered cookies as a variable?

Utilize the push method to form a new array

Tabulating with jQuery Arrays

Struggling to incorporate './MongoDB' using vue-cli and webpack

The process of passing $refs in Vue explained

What is the process for transferring a JSON data object to the server with JavaScript XMLHttpRequest?

Setting the focus on an input when updating a property in the Pinia store using Vue

Insert a variety of images onto the page at the exact position where the user has