Create a Multi-Page JavaScript Boilerplate with Webpack 5, Babel and ESLint (Part 4)
This article is a continuation of Part 3.
In this article, we will add configurations to set up multi-page HTML templates.
Setup Multi-Page using Webpack
HTML, CSS and JS files are working now but wait! We handle single file. How to handle multiple files??
Add signup folder structure.
cd src
mkdir signup
cd signup
touch signup.html signup.scss signup.js
Copy the html in signup.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div id="root">
<h1>This is signup page</h1>
</div>
</body>
</html>
Next, we need to add configurations in webpack.config.js to handle multiple HTML files.
/*...*/
const pages = ['signup'];
const mainHtmlPage = [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
chunks: ['index'],
}),
];
const htmlPluginEntries = mainHtmlPage.concat(
pages.map(
(page) =>
new HtmlWebpackPlugin({
template: `./src/${page}/${page}.html`,
filename: `${page}.html`,
chunks: [page],
}),
),
);
module.exports {
/*...*/
entry: {
index: './src/index.js',
signup: './src/signup/signup.js', // signup entry for signup module
},
devServer: {
watchFiles: ['src/*.html', 'src/*/*.html'], // add new entry to handle signup html files
static: path.resolve(__dirname, './dist'),
hot: true,
open: true,
},
plugins: htmlPluginEntries.concat([
new MiniCssExtractPlugin({
filename: '[name].css',
}),
]),
}
This is the detail of configurations for multi-page setup.
1. Defined pages array and added the signup folder name
2. We need to initialize each template usingHtmlWebpackPlugin. To achieve this, we’ll loop on pages array and define template configs for each template and store in htmlPluginEntries
3. Update plugins entry and use htmlPluginEntries with the rest of the plugins’ configs
4. Update entry object. Add a new entry for the signup module in entry object
5. Update devServer object. In watchFiles key, add patterns to watch for changes under src/signup folder.
Restart the server and run npm run dev
Navigate to [LOCALHOST_URL]/signup.html and you will see that the signup page is rendered.
To add a new page, In webpack.config.js, add the folder name in the pages array.
In this project, We are using feature-based pattern for organizing code therefore all assets related to signup page are kept in the signup folder.