Magento root components plugin

This plugin creates unique chunks for each Root Component in a Magento PWA project and extension.

Example#

Given a RootComponents directory in a PWA project with the following structure:

├── Page1
│   └── index.js
├── Page2
│   └── index.js
└── Page3
    └── index.js
CopyCopied to your clipboard
1├── Page1
2│   └── index.js
3├── Page2
4│   └── index.js
5└── Page3
6    └── index.js

This plugin creates unique chunks for Page1, Page2, and Page3. Further webpack optimization techniques, such as CommonsChunkPlugin, can be applied if needed.

Example usage#

// webpack.config.js

const path = require("path");
const { MagentoRootComponentsPlugin } = require("@magento/pwa-buildpack");

module.exports = {
  entry: {
    main: path.join(__dirname, "src"),
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
    chunkFilename: "[name].chunk.js",
  },
  plugins: [
    new MagentoRootComponentsPlugin({
      rootComponentsDirs: [path.join(__dirname, "src/RootComponents")], // optional
      manifestFileName: "roots-manifest.json", // optional
    }),
  ],
};
CopyCopied to your clipboard
1// webpack.config.js
2
3const path = require("path");
4const { MagentoRootComponentsPlugin } = require("@magento/pwa-buildpack");
5
6module.exports = {
7  entry: {
8    main: path.join(__dirname, "src"),
9  },
10  output: {
11    path: path.join(__dirname, "dist"),
12    filename: "[name].js",
13    chunkFilename: "[name].chunk.js",
14  },
15  plugins: [
16    new MagentoRootComponentsPlugin({
17      rootComponentsDirs: [path.join(__dirname, "src/RootComponents")], // optional
18      manifestFileName: "roots-manifest.json", // optional
19    }),
20  ],
21};

Last updated 6/1/2021

Was this helpful?

Yes

No