It will collect */index.[jt]sx?
files under src/pages
directory as entries, and generate corresponding HTML file for each entry.
npm install --save-dev mpa-rspack-plugin
const MpaRspackPlugin = require('mpa-rspack-plugin')
module.exports = {
plugins: [
new MpaRspackPlugin(),
],
}
new MpaRspackPlugin({
/**
* Pass to builtins.html
* See https://www.rspack.dev/config/builtins.html#builtinshtml
*/
html: {},
/**
* ID of the node to be mounted during page rendering.
* @default 'root'
*/
mountElementId: 'root',
/**
* The paths of the global dependencies.
* For example: ['./src/global.scss']
*/
globalImport: [],
/**
* Whether to convert the output HTML filename to lowercase.
* @default false
*/
lowerCase: false,
/**
* The path of the layout component.
* For example: './src/layout.jsx'
*/
layout: '',
/**
* The address that will open in the browser after devServer starts.
*/
open: '',
})
Create config.json
at the same level as the page component to declare page-level configuration. The page-level configuration will be merged with the global html
configuration to generate the final configuration for the page.
{
"filename": "xxxx.html",
}
The page component will be passed as a child component to the Layout
component.
export default function Layout({ children }) {
return children
}