Skip to content

Commit

Permalink
Merge pull request #18 from tomik23:description-added
Browse files Browse the repository at this point in the history
Description added
  • Loading branch information
tomickigrzegorz authored Feb 13, 2021
2 parents 06ea305 + d2fadf8 commit eddfaf1
Show file tree
Hide file tree
Showing 22 changed files with 121 additions and 24 deletions.
58 changes: 55 additions & 3 deletions config/webpack.base.js → config/webpack.common.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,15 @@ const configurePugLoader = () => {
const entryHtmlPlugins = config.map(({ site, share }) => {
return new HtmlWebPackPlugin({
filename: `${site}.html`,

// template for individual pages index, about and contact
template: `./sources/templates/${site}.pug`,

// json data drawn into pug templates
DATA: require(`../sources/data/${site}.json`),

// injecting js and css files into
// html as well as common share.js file
chunks: [site, share],
})
})
Expand All @@ -52,6 +59,7 @@ const configureOutput = () => {
}

module.exports = {
// input files
entry: {
index: {
import: './sources/js/index.js',
Expand All @@ -66,18 +74,62 @@ module.exports = {
},
share: './sources/js/module/share.js'
},
// configuration of output files
output: configureOutput(),
module: {
rules: [
// Images: Copy image files to build folder

// Images, fonts, e.t.c: Copy files to build folder
// https://webpack.js.org/guides/asset-modules/#resource-assets
// {
// test: /\.svg/,
// type: 'asset/resource',
// generator: {
// // adding a hash to the file
// filename: 'images/static/[name].[hash][ext]',
// },
// },

// OR -------------------------

// creates an inline svg
// {
// test: /\.svg/,
// type: 'asset/inline',
// },

// OR -------------------------

{
test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
type: 'asset/resource',
test: /\.svg/,
type: "asset",
generator: {
// adding a hash to the file
// and copy to specific folder
filename: 'images/static/[name].[hash][ext]',
},

// depending on the size of the file,
// if the file is too small, the file is inline,
// if the larger niche size, the file is only copied
parser: {
dataUrlCondition: {
maxSize: 30 * 1024, // 30 * 1024
}
},
},

// ----------------------------

// Other uses, fonts
// the above solution works not only on
// graphic files but also on fonts etc.

{
test: /\.(woff(2)?|eot|ttf|otf)$/,
type: 'asset/inline',
},

configureBabelLoader(),
configurePugLoader()
],
Expand Down
18 changes: 16 additions & 2 deletions config/webpack.dev.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
const path = require('path');
const webpack = require('webpack');
const baseConfig = require('./webpack.base.js');
const baseConfig = require('./webpack.common.js');
const { merge } = require('webpack-merge');

// common part for production and dev
const { cssLoaders } = require('./util');

// Configure Dev Server
Expand All @@ -13,17 +15,24 @@ const configureDevServer = () => {
liveReload: true,
hot: true,
publicPath: '/',
stats: 'errors-only',
inline: true,
watchContentBase: true,
};
};

module.exports = merge(baseConfig, {
// This option controls if and
// how source maps are generated
devtool: 'eval-source-map',

// Providing the mode configuration option tells
// webpack to use its built-in optimizations accordingly
mode: 'development',

// https://webpack.js.org/configuration/target/#root
target: 'web',
devServer: configureDevServer(),
devtool: 'eval-source-map',
module: {
rules: [
{
Expand All @@ -37,6 +46,11 @@ module.exports = merge(baseConfig, {
},
plugins: [
new webpack.HotModuleReplacementPlugin(),

// we create a global variable that
// we use in pug and we can use in js
// https://webpack.js.org/plugins/define-plugin/
// In pug - var DATA = self.htmlWebpackPlugin.options.DATA
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(false)
}),
Expand Down
32 changes: 27 additions & 5 deletions config/webpack.prod.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
const webpack = require('webpack');
const path = require('path');
const baseConfig = require('./webpack.base.js');
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.common.js');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const TerserPlugin = require('terser-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

// common part for production and dev
const { cssLoaders } = require('./util');

// configure Optimization
Expand All @@ -28,7 +29,7 @@ const configureMiniCssExtract = () => {
}
}

// configure SW
// configure Service Worker
const configureSW = () => {
return {
clientsClaim: true,
Expand All @@ -49,6 +50,8 @@ const configureCopy = () => {
{
from: 'sources/images/',
to: 'images/',
// blocking file copying by plugin webpack will
// do it for you and rename it with a hash
globOptions: {
ignore: ['**.svg']
}
Expand All @@ -69,6 +72,8 @@ module.exports = merge(baseConfig, {
loader: MiniCssExtractPlugin.loader,
options: {
// set path for images
// this setting is compatible with windows
// changes the path to the file, in our case svg
publicPath: '../../',
},
},
Expand All @@ -79,22 +84,39 @@ module.exports = merge(baseConfig, {
},
optimization: configureOptimization(),
plugins: [
// when we run the production build then
// the docs folder is cleared
new CleanWebpackPlugin({
dry: false,
verbose: true
}),

// we extract scss files from js and create
// separate files for individual pages
new MiniCssExtractPlugin(
configureMiniCssExtract()
),

// we create a service-worker for our data
new WorkboxPlugin.GenerateSW(
configureSW()
),

// we copy all necessary graphic files
// and assets to build folder
new CopyWebpackPlugin(
configureCopy()
),

// we create a global variable that
// we use in pug and we can use in js
// https://webpack.js.org/plugins/define-plugin/
// In pug - var DATA = self.htmlWebpackPlugin.options.DATA
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true)
}),

// Visualization of the size of js files
new BundleAnalyzerPlugin({
openAnalyzer: true
}),
Expand Down
2 changes: 1 addition & 1 deletion docs/about.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html class="about" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - about"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - about</title><link rel="manifest" href="/assets/manifest.json"><link rel="icon" type="image/x-icon" href="/favicon.ico"><script defer="defer" src="./vendor/js/about.8fb1f424632e5ebf4c8a.js"></script><script defer="defer" src="./vendor/js/share.8fb1f424632e5ebf4c8a.js"></script><link href="./vendor/css/about.8fb1f424632e5ebf4c8a.css" rel="stylesheet"></head><body><div class="nav"><a href="./" title="index">index</a><a class="active" href="./about.html" title="about me">about me</a><a href="./contact.html" title="CONTACT">contact</a></div><h1>ABOUT ME</h1><img class="responsive" src="images/about.jpg"></body></html>
<!doctype html><html class="about" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - about"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - about</title><link rel="manifest" href="./assets/manifest.json"><link rel="icon" type="image/x-icon" href="./favicon.ico"><script defer="defer" src="./vendor/js/about.bc2fa4358ed625b6231a.js"></script><script defer="defer" src="./vendor/js/share.bc2fa4358ed625b6231a.js"></script><link href="./vendor/css/about.bc2fa4358ed625b6231a.css" rel="stylesheet"></head><body><div class="nav"><a href="./" title="index">index</a><a class="active" href="./about.html" title="about me">about me</a><a href="./contact.html" title="CONTACT">contact</a></div><h1>ABOUT ME</h1><img class="responsive" src="images/about.jpg"></body></html>
2 changes: 1 addition & 1 deletion docs/contact.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html class="contact" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - contact"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - contact</title><link rel="manifest" href="/assets/manifest.json"><link rel="icon" type="image/x-icon" href="/favicon.ico"><script defer="defer" src="./vendor/js/contact.8fb1f424632e5ebf4c8a.js"></script><link href="./vendor/css/contact.8fb1f424632e5ebf4c8a.css" rel="stylesheet"></head><body><div class="nav"><a href="./" title="index">index</a><a href="./about.html" title="about me">about me</a><a class="active" href="./contact.html" title="CONTACT">contact</a></div><h1>CONTACT</h1><img class="responsive" src="images/contact.jpg"></body></html>
<!doctype html><html class="contact" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - contact"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - contact</title><link rel="manifest" href="./assets/manifest.json"><link rel="icon" type="image/x-icon" href="./favicon.ico"><script defer="defer" src="./vendor/js/contact.bc2fa4358ed625b6231a.js"></script><link href="./vendor/css/contact.bc2fa4358ed625b6231a.css" rel="stylesheet"></head><body><div class="nav"><a href="./" title="index">index</a><a href="./about.html" title="about me">about me</a><a class="active" href="./contact.html" title="CONTACT">contact</a></div><h1>CONTACT</h1><img class="responsive" src="images/contact.jpg"></body></html>
1 change: 0 additions & 1 deletion docs/images/static/bamboo-logo.4d42886c6b116c786dd6.svg

This file was deleted.

2 changes: 1 addition & 1 deletion docs/index.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html class="index" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - index"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - index</title><link rel="manifest" href="/assets/manifest.json"><link rel="icon" type="image/x-icon" href="/favicon.ico"><script defer="defer" src="./vendor/js/index.8fb1f424632e5ebf4c8a.js"></script><script defer="defer" src="./vendor/js/share.8fb1f424632e5ebf4c8a.js"></script><link href="./vendor/css/index.8fb1f424632e5ebf4c8a.css" rel="stylesheet"></head><body><div class="nav"><a class="active" href="./" title="index">index</a><a href="./about.html" title="about me">about me</a><a href="./contact.html" title="CONTACT">contact</a></div><h1>INDEX</h1><img class="responsive" src="images/index.jpg"></body></html>
<!doctype html><html class="index" lang="pl" dir="ltr"><head><link rel="dns-prefetch" href="//google-analytics.com"><link rel="preconnect" href="//fonts.gstatic.com/" crossorigin><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="description" content="description - index"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="index,follow"><meta name="theme-color" content="#ffffff"><meta name="msapplication-navbutton-color" content="#ffffff"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta content="telephone=no" name="format-detection"><title>title - index</title><link rel="manifest" href="./assets/manifest.json"><link rel="icon" type="image/x-icon" href="./favicon.ico"><script defer="defer" src="./vendor/js/index.bc2fa4358ed625b6231a.js"></script><script defer="defer" src="./vendor/js/share.bc2fa4358ed625b6231a.js"></script><link href="./vendor/css/index.bc2fa4358ed625b6231a.css" rel="stylesheet"></head><body><div class="nav"><a class="active" href="./" title="index">index</a><a href="./about.html" title="about me">about me</a><a href="./contact.html" title="CONTACT">contact</a></div><h1>INDEX</h1><img class="responsive" src="images/index.jpg"></body></html>
Loading

0 comments on commit eddfaf1

Please sign in to comment.