Created
September 15, 2023 01:15
Module Federation Nonce Plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const HtmlWebpackPlugin = require('html-webpack-plugin'); | |
const {ModuleFederationPlugin} = require('webpack').container; | |
const {RuntimeGlobals, RuntimeModule} = require('webpack'); | |
const path = require('path'); | |
const deps = require('./package.json').dependencies; | |
class Testing123RuntimeModule extends RuntimeModule { | |
constructor() { | |
super('testing123', RuntimeModule.STAGE_BASIC + 1); | |
} | |
generate() { | |
return ` | |
const testing123 = window.testing123; | |
if (testing123) { | |
__webpack_require__.nc = testing123; | |
} | |
`; | |
} | |
} | |
class Testing123Plugin { | |
apply(compiler) { | |
compiler.options.devtool =false; | |
compiler.hooks.thisCompilation.tap("Testing123Plugin", (compilation) => { | |
compilation.hooks.additionalTreeRuntimeRequirements.tap("Testing123Plugin", (chunk, set) => { | |
compilation.addRuntimeModule( | |
chunk, | |
new Testing123RuntimeModule() | |
); | |
return true; | |
}); | |
}); | |
} | |
} | |
module.exports = { | |
entry: './src/index', | |
mode: 'development', | |
optimization: { | |
minimize: false, | |
}, | |
devServer: { | |
static: { | |
directory: path.join(__dirname, 'dist'), | |
}, | |
port: 3001, | |
}, | |
output: { | |
publicPath: 'auto', | |
}, | |
module: { | |
rules: [ | |
{ | |
test: /\.m?js$/, | |
type: 'javascript/auto', | |
resolve: { | |
fullySpecified: false, | |
}, | |
}, | |
{ | |
test: /\.jsx?$/, | |
loader: 'babel-loader', | |
exclude: /node_modules/, | |
options: { | |
presets: ['@babel/preset-react'], | |
}, | |
}, | |
], | |
}, | |
plugins: [ | |
new Testing123Plugin(), | |
new ModuleFederationPlugin({ | |
name: 'app1', | |
library: {type: 'var', name: 'app1'}, | |
remotes: { | |
app2: 'app2', | |
}, | |
shared: { | |
...deps, | |
'react-dom': { | |
import: 'react-dom', // the "react" package will be used a provided and fallback module | |
shareKey: 'react-dom', // under this name the shared module will be placed in the share scope | |
shareScope: 'legacy', // share scope with this name will be used | |
singleton: true, // only a single version of the shared module is allowed | |
}, | |
// oldReact: { | |
// import: "react", // the "react" package will be used a provided and fallback module | |
// shareKey: "oldReact", // under this name the shared module will be placed in the share scope | |
// shareScope: "legacy", // share scope with this name will be used | |
// singleton: true, // only a single version of the shared module is allowed | |
// } | |
}, | |
}), | |
new HtmlWebpackPlugin({ | |
template: './public/index.html', | |
app2RemoteEntry: getRemoteEntryUrl(3002), | |
}), | |
], | |
}; | |
function getRemoteEntryUrl(port) { | |
const {CODESANDBOX_SSE, HOSTNAME = ''} = process.env; | |
// Check if the example is running on codesandbox | |
// https://codesandbox.io/docs/environment | |
if (!CODESANDBOX_SSE) { | |
return `//localhost:${port}/remoteEntry.js`; | |
} | |
const parts = HOSTNAME.split('-'); | |
const codesandboxId = parts[parts.length - 1]; | |
return `//${codesandboxId}-${port}.sse.codesandbox.io/remoteEntry.js`; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment