I’m rebuilding my own website and I want to add some transitions between pages.
In this example I have two pug files in my src folder:
In index.pug I have a line of code ( a(href='./about') Go to about ) which should link to the about webpage.
Instead I get this error cannot get /.
If I change that to ( a(href='./about.html Go to about ) and run this in production everything is working smoothly.
My folder structure is:
dist/
+-- index.html
+-- about.html
+-- main.css
+-- main.bundle.js
+-- vendor.bundle.js
node_modules/
src/
+-- partials/
+-- sass/
+-- index.pug
+-- about.pug
+-- index.js
+-- vendor.js
+-- main.scss
.gitignore
package-lock.json
package.json
webpack.common.js
webpack.dev.js
webpack.prod.js
webpack.common.js
const path = require('path');
//const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/index.js',
vendor: './src/vendor.js'
},
//plugins: [
// new HtmlWebpackPlugin({
// template: './src/index.pug'
// })
//],
module: {
rules: [
{
test: /.(svg|png|jpe?g|gif)$/i,
type: 'asset/resource',
generator: {
filename: 'images/[hash][ext][query]',
}
},
{
test: /.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
}
};
webpack.prod.js
const path = require('path');
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require("terser-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = merge(common, {
mode: 'production',
output: {
filename: '[name].[contenthash].bundle.js',
path: path.resolve(__dirname, 'dist')
},
optimization: {
minimizer: [
new TerserPlugin(),
new HtmlWebpackPlugin({
template: "./src/index.pug",
filename: 'index.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true
}
}),
new HtmlWebpackPlugin({
template: "./src/about.pug",
filename: 'about.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true
}
})
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
}),
new CleanWebpackPlugin()
],
module: {
rules: [
{
test: /.pug$/,
use: [
{
loader: 'simple-pug-loader'
}
]
},
{
test: /.scss$/,
use: [
MiniCssExtractPlugin.loader, //3. Creates separate CSS file
'css-loader', //2. Turns css into js
'sass-loader' //1. Turns sass into css
]
},
{
test: /.(gif|png|jpe?g|svg)$/i,
use: [
// Using file-loader will create another set of images and will link to the wrong images
// As of Webpack 5.0, this can be handled without installing a loader at all. So file-loader, url-loader, raw-loader, etc. are now obsolete.
// https://stackoverflow.com/questions/69147962/file-loader-creating-2-images-and-linking-the-wrong-one
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75
}
}
}
]
}
]
},
});
webpack.dev.js
const path = require('path');
const common = require('./webpack.common.js');
const { merge } = require('webpack-merge');
const LiveReloadPlugin = require('webpack-livereload-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(common, {
mode: 'development',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.pug$/,
use: [
{
loader: 'simple-pug-loader'
}
]
},
{
test: /.scss$/,
use: [
'style-loader', //3. Injects css into the DOM
'css-loader', //2. Turns css into js
'sass-loader' //1. Turns sass into css
]
},
]
},
devServer: {
hot: true,
liveReload: true,
open: 'Google Chrome'
},
plugins: [
new LiveReloadPlugin({ // LiveReloadPlugin is necessary in order to fix live reloading on the dev side
appendScriptTag: true
}),
new HtmlWebpackPlugin({
template: './src/index.pug'
}),
new HtmlWebpackPlugin({
template: './src/about.pug'
})
]
});
I tried adding a new template in the HtmlWebpackPlugin in webpack.dev.js (this worked in production ), but it only shows the about page in localhost:8080 followed by this error:
Compiled with problems:X
ERROR
Conflict: Multiple assets emit different content to the same filename index.html