A simple multipage Webpack boilerplate using HTML, SCSS, JS. See the demo site.
git clone https://github.com/webdiscus/webpack-html-scss-boilerplate.git
cd webpack-html-scss-boilerplate
npm i
npm start
npm run build
npm run preview
To build static pages is used the powerful html-bundler-webpack-plugin.
Add the new HTML page in the entry option:
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
plugins: [
new HtmlBundlerPlugin({
entry: {
// define HTML files here
'index': './src/views/home/index.html', // output dist/index.html
'route/to/page': './src/views/page/index.html', // output dist/route/to/page.html
},
}),
],
// ...
};Note
Using the
html-bundler-webpack-pluginthe entrypoint is an HTML file.
All source files of styles, scripts, images can be loaded directly in HTML.
This Plugin automatically extracts all used source resources into separate output file.
Add source files of styles, scripts, images directly in HTML:
<!DOCTYPE html>
<html>
<head>
<!-- load source styles here -->
<link href="./style.scss" rel="stylesheet">
<!-- load source scripts here and/or in body -->
<script src="./main.js" defer="defer"></script>
</head>
<body>
<h1>Homepage</h1>
<!-- load source file of image -->
<img src="./homepage.png">
</body>
</html>Specify output filenames of script and styles using js and css options of the Plugin:
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
plugins: [
new HtmlBundlerPlugin({
// path to directory with templates
entry: 'src/views/home/',
// or define templates manually
entry: {
'index': './src/views/home/index.html', // output dist/index.html
'route/to/page': './src/views/page/index.html', // output dist/route/to/page.html
},
js: {
// output filename of extracted JS from source script loaded in HTML via `<script>` tag
filename: 'assets/js/[name].[contenthash:8].js', // output into dist/assets/js/ directory
},
css: {
// output filename of extracted CSS from source style loaded in HTML via `<link>` tag
filename: 'assets/css/[name].[contenthash:8].css', // output into dist/assets/css/ directory
},
}),
],
// ...
};To extract images form HTML into separate files add the simple rule to Webpack config:
module.exports = {
module: {
rules: [
{
test: /[\\/]images[\\/].+(png|jpe?g|svg|webp|ico)$/i, // load images from `images` directory only
generator: {
// output filename of extracted image
filename: 'assets/img/[name].[hash:8][ext]', // output into dist/assets/img/ directory
},
},
],
},
// ...
};To extract images into separate files or inline images add the advanced rule to Webpack config:
module.exports = {
module: {
rules: [
{
test: /[\\/]images[\\/].+(png|jpe?g|svg|webp|ico)$/i, // load images from `images` directory only
oneOf: [
// inline image using `?inline` query
{
resourceQuery: /inline/,
type: 'asset/inline',
},
// auto inline by image size
{
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 1024,
},
},
generator: {
// output filename of extracted image
filename: 'assets/img/[name].[hash:8][ext]', // output into dist/assets/img/ directory
},
},
],
},
],
},
// ...
};Note
Add the
[\\/]images[\\/]to thetestRegExp when you haveSVGfiles for fonts and images to restrict this rule to images only.
- ansis - The Node.js library for ANSI color styling of text in terminal.
- pug-plugin - Webpack plugin for Pug.
- pug-loader - Webpack loader for Pug.