it is my firs ask here, in Stack OverFlow. I am working with React and React-Router but I have the next error on Chrome:
GET http://localhost:3000/alumno/src/fonts/awesome/css/font-awesome.css
The route is: http://localhost:3000/alumno/inicio
If the route would be: http://localhost:3000/inicio ; I will not have any problem, all sources loads correctly, the problem appear when I have more than one children after localhost (http://localhost:3000/XXX/YYY). My structure of files is: Folder_PUBLIC > ( Index.html; Index.js Folder_SRC > ( all my srcs ) ). I am seeing that always tries to load the sources from last child. So this folder does not exists. It may load the sources from the root / as I have defined on my Index.html. I show you my files:
INDEX.HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>
<link rel="icon" type="image/ico" href="./src/images/icono.ico"/>
<title>Universidad Politécnica de Cartagena</title>
<link rel="stylesheet" type="text/css" href="./src/fonts/awesome/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="./src/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="./src/css/select2.css"/>
<link rel="stylesheet" type="text/css" href="./src/css/index.css"/>
</head>
<body>
<div id="idRoot" class="container"></div>
<script type="text/javascript" src="./src/js/jquery.js"></script>
<script type="text/javascript" src="./src/js/bootstrap.js"></script>
<script type="text/javascript" src="./src/js/select2.js"></script>
<script src="./index.js"></script>
</body>
</html>
WEBPACK.CONFIF.JS
'use strict';
var CopyFiles = require('copy-webpack-plugin');
module.exports = {
resolve: {
extensions: ['', '.js', '.jsx']
},
context: __dirname,
entry: {
app: ['./src/index.jsx']
},
output: {
path: './public',
filename: 'index.js'
/*,
publicPath: '/'
*/
},
devServer: {
host: 'localhost',
port: 3000,
inline: true,
historyApiFallback: true
},
module: {
loaders: [
{
test: /(\.js|.jsx)$/,
loader: 'babel',
query: {
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"react-html-attrs",
"transform-decorators-legacy",
"transform-class-properties"
]
}
},
{
test: /\.css?$/,
loaders: [
'style',
'css'
]
}
]
},
plugins: [
new CopyFiles([
{
from: './src/index.html',
to: './'
},
{
from: './node_modules/bootstrap/dist/js/bootstrap.js',
to: './src/js'
},
{
from: './node_modules/jquery/dist/jquery.js',
to: './src/js'
},
{
from: './node_modules/select2/dist/js/select2.js',
to: './src/js'
},
{
from: './node_modules/bootstrap/dist/css/bootstrap.css',
to: './src/css'
},
{
from: './node_modules/select2/dist/css/select2.css',
to: './src/css'
},
{
from: './src/styles/index.css',
to: './src/css'
},
{
context: './node_modules/bootstrap/dist/fonts',
from: '**/*',
to: './src/fonts'
},
{
context: './src/fonts',
from: '**/*',
to: './src/fonts'
},
{
context: './src/images',
from: '**/*',
to: './src/images'
}
])
]
}
My Bootstrap, jQuery,... is pure, I do not import it on React and I do not use React-Bootstrap, etc.
Thanks you.
The links to your static resources (CSS and JS) are all relative to the current page's URL. Fix it by making the URLs absolute – simply remove the dot at the beginning:
<link rel="stylesheet" type="text/css" href="/src/fonts/awesome/css/font-awesome.css"/>
Related
I have tried to add Webpack to my vue project to use the require.context, but unfortunately it doesn't work.
When I run my project I get these errors:
Uncaught SyntaxError: Unexpected token '<'
and
Error in mounted hook:
TypeError: __webpack_require__(...).context is not a function
The "Unexpected token" error comes from embedding Wepback in index.html with the script tag. But when I delete it the error goes away.
Here's the code:
webpack.config.js
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin()
]
};
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/hcp1kvq.css">
<title><%= htmlWebpackPlugin.options.title %></title>
<base href="/" />
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="../dist/main.js"></script>
</body>
</html>
Art.vue
<template>
<div>
<h1>Art</h1>
<ArtImage :key="key" v-for="(img, key) in images" :link="imageDir + key.substr(1)" />
<div :key="key" v-for="(img, key) in images" >
<img :src="imageDir + key.substr(1)" class="" >
</div>
</div>
</template>
<script>
import ArtImage from "../components/ArtImage.vue"
export default {
components: {
ArtImage,
},
data() {
return {
imageDir: "../assets", // you know this already just from directory structure
images: {}
}
},
mounted() {
this.importAll(require.context(this.imageDir, true, /\.png$/))
},
methods: {
importAll(r) {
var imgs = {}
r.keys().forEach(key => (imgs[key] = r(key)))
this.images = imgs
}
}
}
</script>
<style>
</style>
while using brotli compression algorithm for my react webapp i got this error in both browsers chrome and mozilla .All files are properly generted by brotli.It reduced my webapp size from 600kb to 139 kb ,but i dont why it is not working properly
my webpack
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const outputDirectory = "dist";
const BrotliGzipPlugin = require('brotli-gzip-webpack-plugin')
const webpack = require("webpack");
module.exports = {
entry: ["babel-polyfill", "./website/client/src/index.js"],
output: {
path: path.join(__dirname, outputDirectory),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"]
}
]
},
devServer: {
historyApiFallback: true
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: "http://localhost:4000"
})
},
plugins: [
new BrotliGzipPlugin({
asset: '[path].br[query]',
algorithm: 'brotli',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8,
quality: 11
}),
new BrotliGzipPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8,
quality:11
}),
new CleanWebpackPlugin({
clearAfterEveryBuildPatterns: [outputDirectory]
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
favicon: "./public/favicon.ico"
}),
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
})
]
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>xyz</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet" type="text/css">
<body>
<div id="root"></div>
<div id="preloader"></div>
<i class="fas fa-arrow-up"></i>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" async integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" async integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js" async></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" ></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js" ></script>
</body>
</html>
express server configuration
I have set request Enconding headers according to different browsers
app.get("/bundle.js", (req, res) => {
if (req.header("Accept-Encoding").includes("br")) {
console.log("calling brotli");
res.set("Content-Encoding: br");
res.set("Content-Type", "application/javascript");
res.sendFile(path.join(__dirname, "..","..","dist","bundle.js.br"))
} else if (req.header("Accept-Encoding").includes("gz")) {
console.log("Calling gzip");
res.set("Content-Encoding: gzip");
res.set("Content-Type", "application/javascript");
res.sendFile(path.join( __dirname, "..","..","dist", "bundle.js.gz"));
} else {
console.log("Calling Uncompressed");
res.sendFile(path.join( __dirname, "..","..","dist", "bundle.js"));
}
});
Changes my output webpack configuration to mulitiple types od bundle.js output
webpack.config.js
output: {
path: path.join(__dirname, outputDirectory),
filename: "[name].bundle.js",
chunkFilename: "[id].bundle.js"
},
Now it works fine
take reference from https://github.com/webpack/docs/wiki/configuration#entry
I seem to be stuck. This may be a question that has been asked a million times before but I am at a point where I don't even know what to search for to get an answer. I apologize in advance.
I have a Webpack 4 VueJS 2 setup. I sorta works. Stuff compiles and the Webpack-dev-server can show me most of my site and holds a lot of the intended behaviour I expect. But... I cannot seem to get Webpack to inject files into my html template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kollecto</title>
<link rel="icon" type="image/png" sizes="32x32" href="static/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="static/img/favicon-16x16.png">
<!--[if IE]><link rel="shortcut icon" href="/static/img/icons/favicon.ico"><![endif]-->
<!-- Add to home screen for Android and modern mobile browsers -->
<link rel="manifest" href="static/manifest.json">
<meta name="theme-color" content="#ffffff">
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="apple-mobile-web-app-title" content="Kollecto">
<link rel="apple-touch-icon" href="static/img/icons/apple-touch-icon-152x152.png">
<!-- <link rel="mask-icon" href="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/safari-pinned-tab.svg" color="#ffffff"> -->
<!-- Add to home screen for Windows -->
<!-- <meta name="msapplication-TileImage" content="<%= htmlWebpackPlugin.files.publicPath %>static/img/icons/msapplication-icon-144x144.png"> -->
<meta name="msapplication-TileColor" content="#ffffff">
<!-- <% for (var chunk of webpack.chunks) {
for (var file of chunk.files) {
if (file.match(/\.(js|css)$/)) { %> -->
<!-- <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %> -->
</head>
<body>
<style>
<!-- inline styles.... -->
</style>
<noscript>
This is your fallback content in case JavaScript fails to load.
</noscript>
<div id="app">
<div class="spinner-container">
<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<!-- Todo: only include in production -->
<!-- <%= htmlWebpackPlugin.options.serviceWorkerLoader %> -->
<!-- built files will be auto injected -->
</body>
</html>
This is an attempt of a migration from Webpack 3 to 4 with VueJS included. Here is my webpack.common.js
'use strict';
const helpers = require('./helpers');
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: {
polyfill: '#babel/polyfill',
main: path.resolve(__dirname, '../src/main.js'),
vendor: path.resolve(__dirname, '../src/vendor.js')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
include: [helpers.root('src')]
},
{
test: /\.html$/,
use: [
'html-loader'
]
},
{
test: /\.(svg|jpe?g|gif|png)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
outputPath: 'static/img'
}
}
},
{
test: /\.(ttf|eot|woff2?|otf)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
outputPath: 'static/fonts'
}
}
},
{
test: /\.ico$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
outputPath: 'static/img/icons'
}
}
},
]
},
plugins: [
new VueLoaderPlugin(),
]
};
And of course my webpack.dev.js
'use strict';
const webpack = require('webpack');
const path = require('path');
const common = require('./webpack.common');
const merge = require('webpack-merge');
const fs = require('fs')
const helpers = require('./helpers');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
module.exports = merge(common, {
mode: "development",
resolve: {
extensions: [ '.js', '.vue' ],
alias: {
'vue$':'vue/dist/vue.runtime.js',
'#': helpers.root('src')
}
},
devServer: {
port: 9000,
hot: true,
open: true,
overlay: true,
stats: {
normal: true
}
},
output: {
filename: `[name].bundle.js`,
path: path.resolve(__dirname, "dist")
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: "all"
}
},
plugins: [
new HtmlWebpackPlugin({
filename: helpers.root('index.html'),
template: helpers.root('index.html'),
inject: true,
serviceWorkerLoader: `<script>${fs.readFileSync(path.join(__dirname,
'./service-worker-dev.js'), 'utf-8')}</script>`
}),
new webpack.EnvironmentPlugin({NODE_ENV: 'development'}),
new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsPlugin()
],
module: {
rules: [
{
test: /\.(scss|sass)$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
});
I hope somone has sharper eyes than me. Because I cannot seem to get icon files and scripts injected into my template. I know the index.html is commented and outcommented etc. But this is what I have. And I need help. Please :) More code can be provided if needed. (guide I followed: https://medium.com/js-dojo/how-to-configure-webpack-4-with-vuejs-a-complete-guide-209e943c4772)
It turns out that webpack completely ignores the static folder in a project unless explicitly told so. This have resulted in me adding the CopyWebpackPlugin to my prod/staging builds as follows:
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: 'static',
ignore: ['.*']
}
])
This fixed my problem. All I had to do from there was make my loaders and bundles look for the correct files. The static folder is a 1 to 1 copy of your static folder on your applications root directory.
I am a newcomer to webpack, In HTML, I want to compress and reference link CSS files
I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
<link rel="stylesheet" href="../src/common.css">
</head>
<body>
<div class="common-red">
hello;
</div>
<script src="main.js"></script>
</body>
</html>
js file:
import "common.css"
This is my profile:
webpack.config.js:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: "./src/index.js",
output:{
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,
"style-loader",
'css-loader'
]
},
{
test:/\.(png|svg|jpg|gif)$/,
use:[
'file-loader'
]
},
{
test:/\.(html)$/,
use:{
loader: "html-loader",
options:{
attrs:['img:src']
}
}
}
]
},
plugins:[
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
}
}
I want to compress the link CSS code on HTML, but I tried to manipulate it, I can't package the link css file on html, but I can package css in the js file.
what should I do?
Expectations:
Package the linked css file in HTML and reference it
Can you help me?
thank you
You need to import your css into your js file so that MiniCssExtractPlugin can work
Something like this
app.js
import "css/Admin/admin.css";
import "jquery/dist/jquery.min.js";
import "bootstrap/dist/js/bootstrap.min.js";
say i have a public/index.html file
and then a separate html file called otherScript which is just a file containing <script> tags with a script in
how would I inject this scripts into my public/index.html file?
I want to use new HtmlWebpackPlugin
but in the example it just says:
new HtmlWebpackPlugin({
template: 'public/index.html'
inject: true
})
I can't see anywhere that I should link to the other html file?
If it's an HTML file, you can load it using a Webpack loader called raw-loader or you could use html-loader.
And use it like this:
Webpack.config
{
test: /\.html$/,
use: 'raw-loader'
}
Module
// import file
import htmlFile from 'myfile.html';
// insert the contents of file at end of body
var body = document.getElementsByTagName('body')[0];
body.insertAdjacentHTML('beforeEnd', htmlFile);
However, an HTML file full of script tags sounds like bad practice IMO.
If you want to inject the scripts to the page, I would suggest using a different method entirely.
One way would be to import the scripts as normal using import or require, or you could have an array of dependencies to load and load them all like this:
var dependencies = [
'path/to/script/1.js',
'path/to/script/2.js'
]
for(var i = 0; i < dependencies.length; i++) {
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = dependencies[i];
document.getElementsByTagName('head')[0].appendChild(script);
}
You can use the html-webpack-tags-plugin plugin.
This is helpful if you want to enable cache busting on the script, which was the main reason I didn't want to just use the copy-webpack-plugin and a static script element.
webpack.dev.config.js
new HtmlWebpackTagsPlugin({
// this script must be loaded before all other scripts
append: false,
tags: ['src/myScript.js'],
}),
webpack.prod.config.js
new HtmlWebpackTagsPlugin({
// this script must be loaded before all other scripts
append: false,
tags: ['src/myScript.js'],
useHash: true,
addHash: (assetPath, hash) => {
const parts = assetPath.split('.');
parts[parts.length - 1] = `${hash}.${parts[parts.length - 1]}`;
return parts.join('.');
},
}),
There is no way to do that using webpack, specially with html-webpack-plugin. The property inject refeers to injecting all the scripts created by webpack into that html you refeered on the template property.
Yes, we can do this. I made some example, hope it will help you.
In webpack js:
const path = require('path');
const webpack = require('webpack');
const TerserPluign = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/assets/js/index.js',
about: './src/assets/js/about.js'
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, './build'),
// publicPath: 'my-domain/'
},
mode: 'none',
module: {
rules: [
{
test: /\.(jpg|png)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 60 * 1024 // max size 60 kilobytes.
}
}
},
{
test: /\.txt/,
type: 'asset/source',
},
{
test: /\.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
]
},
{
test: /\.(less)$/,
use: [
// 'style-loader', 'css-loader', 'less-loader'
MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [ '#babel/env'],
plugins: [ '#babel/plugin-proposal-class-properties']
}
}
},
{
test: /\.hbs$/,
use: [
'handlebars-loader'
]
},
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
'global': {},
}),
new TerserPluign(), // To use reduce size of bundle files,
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css"
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
'**/*',
path.join(process.cwd(), 'dummyBuildFolder/**/*')
]
}),
new HtmlWebpackPlugin({
title: 'Default HTML',
filename: 'index.html',
template: 'src/templates/index.hbs',
description: 'this is meta description for index page',
chunks: ['index']
}),
new HtmlWebpackPlugin({
title: 'About Us HTML',
filename: 'about.html',
template: 'src/templates/about.hbs',
description: 'this is meta description for about us page',
chunks: ['about']
})
]
}
Above will generate two files, index.html and about.html
In index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Default HTML</title>
<meta name="description" content="this is meta description for index page" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script defer src="index.22a0682faed73cf496ac.js"></script>
<link href="index.2ab526c55a3c67e01bfb.css" rel="stylesheet">
</head>
<body>
<div id="my_root" />
<div id="initialMessage"></div>
<div id="lipsumTxtId"></div>
</body>
</html>
In about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About Us HTML</title>
<meta name="description" content="this is meta description for about us page" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script defer src="about.0d3ba2ce20763dbd16dc.js"></script>
<link href="about.352d245e3219b89be11d.css" rel="stylesheet"></head>
<body />
</html>