andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Update dependencies

Browse source
This commit is contained in:
Andras Schmelczer 2022-01-23 23:23:46 +01:00
parent 997ae9e2b8
commit 71e2009b62
3 changed files with 34 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/index.html
View file

@ -27,8 +27,12 @@
<meta name="theme-color" content="#b7455e" /> <meta name="theme-color" content="#b7455e" />
<title>Portfolio - András Schmelczer</title> <title>Portfolio - András Schmelczer</title>
<link inline inline-asset="index.css" inline-asset-delete />
</head> </head>
<body> <body>
<noscript>Javascript is required for this website.</noscript> <noscript>Javascript is required for this website.</noscript>
<script inline inline-asset="index.js" inline-asset-delete></script>
</body> </body>
</html> </html>

3
src/page/header/header.scss
View file

@ -1,3 +1,4 @@
@use 'sass:math';
@use '../../style/mixins' as *; @use '../../style/mixins' as *;
#about { #about {
@ -54,7 +55,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
transform: translateY(-$img-size * 1/3) translateX(-$img-size * 1/3); transform: translateY(math.div(-$img-size, 3)) translateX(math.div(-$img-size, 3));
} }
.placeholder { .placeholder {

70
webpack.config.js
View file

@ -1,58 +1,42 @@
const path = require('path'); const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin'); const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
const Sharp = require('responsive-loader/sharp'); const Sharp = require('responsive-loader/sharp');
const InlineSourceWebpackPlugin = require('inline-source-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack'); const webpack = require('webpack');
const Sass = require('sass');
module.exports = (env, argv) => ({ module.exports = (env, argv) => ({
watchOptions: { watchOptions: {
ignored: /node_modules/, ignored: /node_modules/,
}, },
devtool: argv.mode === 'development' ? 'inline-source-map' : '', devtool: argv.mode === 'development' ? 'inline-source-map' : false,
entry: {
index: './src/index.ts',
},
devServer: { devServer: {
host: '0.0.0.0', hot: false,
disableHostCheck: true,
}, },
optimization: { optimization: {
minimizer: [ minimizer: [
new TerserJSPlugin({ new TerserJSPlugin({
sourceMap: argv.mode === 'development', terserOptions: { sourceMap: argv.mode === 'development' },
}), }),
new OptimizeCSSAssetsPlugin({}),
], ],
}, },
plugins: [ plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
xhtml: true,
template: './src/index.html', template: './src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
},
inlineSource: argv.mode === 'development' ? '' : '.(js|css)$',
}), }),
new HtmlWebpackInlineSourcePlugin(), new MiniCssExtractPlugin(),
new MiniCssExtractPlugin({ new InlineSourceWebpackPlugin({
filename: '[name].css', compress: true,
chunkFilename: '[id].css',
}), }),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
__CURRENT_DATE__: Date.now(), __CURRENT_DATE__: Date.now(),
}), }),
], ],
entry: {
index: './src/index.ts',
},
module: { module: {
rules: [ rules: [
{ {
@ -73,7 +57,7 @@ module.exports = (env, argv) => ({
use: [ use: [
{ {
loader: 'file-loader', loader: 'file-loader',
query: { options: {
outputPath: 'static/', outputPath: 'static/',
name: '[contenthash].[ext]', name: '[contenthash].[ext]',
}, },
@ -84,7 +68,7 @@ module.exports = (env, argv) => ({
test: /\.(pdf)$/i, test: /\.(pdf)$/i,
use: { use: {
loader: 'file-loader', loader: 'file-loader',
query: { options: {
outputPath: 'static/', outputPath: 'static/',
name: '[name].[ext]', name: '[name].[ext]',
}, },
@ -98,7 +82,7 @@ module.exports = (env, argv) => ({
test: /no-change.*$/i, test: /no-change.*$/i,
use: { use: {
loader: 'file-loader', loader: 'file-loader',
query: { options: {
outputPath: '/', outputPath: '/',
name: '[name].[ext]', name: '[name].[ext]',
}, },
@ -109,18 +93,11 @@ module.exports = (env, argv) => ({
use: [ use: [
MiniCssExtractPlugin.loader, MiniCssExtractPlugin.loader,
'css-loader', 'css-loader',
'postcss-loader', 'resolve-url-loader',
{
loader: 'resolve-url-loader',
options: {
keepQuery: true,
},
},
{ {
loader: 'sass-loader', loader: 'sass-loader',
options: { options: {
sourceMap: true, sourceMap: true, // required by resolve-url-loader
implementation: Sass,
}, },
}, },
], ],
@ -136,7 +113,14 @@ module.exports = (env, argv) => ({
loader: 'string-replace-loader', loader: 'string-replace-loader',
options: { options: {
search: /`.*?`/gs, search: /`.*?`/gs,
replace: match => match.replace(/\s\s+/g, ' ').trim(), replace: (match) => match.replace(/\s+/g, ' '),
},
},
{
loader: 'string-replace-loader',
options: {
search: /`.*?`/gs,
replace: (match) => match.replace(/>\s+</g, '><'),
}, },
}, },
], ],
@ -148,7 +132,9 @@ module.exports = (env, argv) => ({
extensions: ['.ts', '.js'], extensions: ['.ts', '.js'],
}, },
output: { output: {
filename: '[name].[contenthash].js', clean: true,
filename: '[name].js',
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'dist'),
publicPath: '',
}, },
}); });