fix: introduce webpack builds #11 (#12)

* fix: introduce webpack builds #11

* fix: introduce webpack builds #11

.husky/pre-commit

@@ -2,5 +2,5 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 if [[ ! -n "${CI}" ]]; then
-    npm lint
+    npm run lint
 fi

package.json

@@ -35,4 +35,4 @@
     "husky": "8.0.3",
     "prettier": "3.0.0"
   }
-}
+}

packages/examples/project-a/federation.config.js

@@ -0,0 +1,15 @@
+export const federationconfig = {
+  name: 'rr_random_package',
+  filename: 'my-remote-entry.js',
+  exposes: {
+    './react': 'react',
+    './pqr': './src/pqr.js',
+    './index': './src/index.js',
+  },
+  shared: {
+    react: {},
+    'react-dom': {},
+    uuid: {},
+    redux: {},
+  },
+};

packages/examples/project-a/package.json

@@ -5,7 +5,7 @@
   "main": "src/index.js",
   "type": "module",
   "scripts": {
-    "build": "rm -rf dist/ && rollup --config rollup.config.mjs",
+    "build": "rm -rf dist/ && webpack && rollup --config rollup.config.mjs",
     "test": "echo \"Error: no test specified\" && exit 1",
     "release": ""
   },
@@ -14,7 +14,7 @@
   "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "redux": "^4.2.1",
+    "redux": "4.2.1",
     "uuid": "9.0.0"
   },
   "devDependencies": {
@@ -23,6 +23,8 @@
     "@rollup/plugin-node-resolve": "15.1.0",
     "@rollup/plugin-replace": "5.0.2",
     "rollup": "3.23.0",
-    "rollup-plugin-module-federation": "*"
+    "rollup-plugin-module-federation": "*",
+    "webpack": "5.84.1",
+    "webpack-cli": "5.1.1"
   }
 }

packages/examples/project-a/rollup.config.mjs

@@ -1,35 +1,22 @@
 import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
+import { federationconfig } from './federation.config.js';
 
-// import federation from "@originjs/vite-plugin-federation";
+// import federation from '@originjs/vite-plugin-federation';
 import federation from 'rollup-plugin-module-federation';
 
 export default {
   output: {
-    dir: 'dist',
+    dir: 'dist/rollup',
     format: 'es',
   },
   plugins: [
     replace({
       'process.env.NODE_ENV': JSON.stringify('production'),
       preventAssignment: true,
     }),
-    federation({
-      name: 'rr-random-package',
-      filename: 'my-remote-entry.js',
-      exposes: {
-        './react': 'react',
-        './pqr': './src/pqr.js',
-        './index': './src/index.js',
-      },
-      shared: {
-        react: {},
-        'react-dom': {},
-        uuid: {},
-        redux: {},
-      },
-    }),
+    federation(federationconfig),
     nodeResolve(),
     commonjs(),
   ],

packages/examples/project-a/src/index.js

@@ -1,6 +1,6 @@
 import React, { Component, useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { ABC } from './abc';
+import { ABC } from './abc.js';
 
 export { createStore, compose } from 'redux';
 export { applyMiddleware as kindlyApplyMiddleware } from 'redux';
@@ -17,7 +17,7 @@ export async function doSomething() {
   console.log('ReactDOM version is: ', ReactDOM.version);
   console.log('A random uuid for you: ', uuidv4());
   console.log('ABC = ', ABC);
-  const { PQR } = await import('./pqr');
+  const { PQR } = await import('./pqr.js');
   console.log('PQR = ', PQR);
 }
 

packages/examples/project-a/webpack.config.mjs

@@ -0,0 +1,22 @@
+import ModuleFederationPlugin from 'webpack/lib/container/ModuleFederationPlugin.js';
+import { federationconfig } from './federation.config.js';
+
+import path from 'node:path';
+
+const __dirname = path.resolve('.');
+
+export default {
+  mode: 'development',
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist/webpack'),
+    filename: 'index.js',
+    library: {
+      type: 'module',
+    },
+  },
+  experiments: {
+    outputModule: true,
+  },
+  plugins: [new ModuleFederationPlugin(federationconfig)],
+};

packages/rollup-plugin-module-federation/rollup.config.mjs

@@ -5,7 +5,7 @@ import replace from '@rollup/plugin-replace';
 export default {
   input: {
     index: 'src/index.js',
-    __federatedImport__: 'src/__federatedImport__.js'
+    __federatedImport__: 'src/__federatedImport__.js',
   },
   output: {
     dir: 'dist',

packages/rollup-plugin-module-federation/src/index.js

@@ -105,7 +105,7 @@ export function getFederatedImportStatementForNode(node, moduleSpecifier) {
     }
     case IMPORTS_TO_FEDERATED_IMPORTS_NODES.ExportNamedDeclaration: {
       node.specifiers.forEach((specifier) => {
-        switch(specifier.type) {
+        switch (specifier.type) {
           case 'ExportSpecifier': {
             if (specifier.exported.name !== specifier.local.name) {
               /**
@@ -445,7 +445,8 @@ export default function federation(federationConfig) {
             if (
               Object.keys(IMPORTS_TO_FEDERATED_IMPORTS_NODES).includes(
                 node.type,
-              ) && node?.source?.value
+              )
+              && node?.source?.value
             ) {
               /**
                * At this point rollup hasn't completed resolution of the import statements in this file.