Compare commits

...

4 Commits

Author SHA1 Message Date
2e8d5371e4
minimize css 2023-01-30 21:46:14 -05:00
f6d07eb657
webpack: split configs into prod/dev 2023-01-30 21:37:04 -05:00
63fa42e1e3
webpack: extract css to files
this prevents unstyled content randomly flashing
2023-01-30 21:25:27 -05:00
c8b11c8efb
webpack: add dev server 2023-01-30 21:08:35 -05:00
9 changed files with 5198 additions and 71 deletions

View File

@ -1,6 +1,7 @@
env: env:
browser: true browser: true
es2021: true es2021: true
node: true
extends: eslint:recommended extends: eslint:recommended
overrides: [] overrides: []
parserOptions: parserOptions:

13
dist/aes.html vendored
View File

@ -1,13 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>encryptme: Simple AES encryption/decryption</title>
<meta name="description" content="Easy to use and simple online tool for AES encryption and decryption.
Advanced settings allow control over the IV, AES mode, and PBKDF2 parameters.">
<script defer src="src_style_css-src_templates_js.js"></script><script defer src="aes.js"></script></head>
<body>
<h1>AES</h1>
</body>
</html>

14
dist/index.html vendored
View File

@ -1,14 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>encryptme</title>
<meta name="description" content="Easy to use and simple online tools for encryption and decryption.">
<script defer src="src_style_css-src_templates_js.js"></script><script defer src="index.js"></script></head>
<body>
<h2>Tools</h2>
<h3>Encryption/decryption</h3>
<a href="aes.html">AES</a>
</body>
</html>

5121
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -5,8 +5,9 @@
"private": true, "private": true,
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack", "build": "webpack --config webpack.prod.js",
"lint": "eslint --ext .js,.jsx src" "lint": "eslint --ext .js,.jsx src *.js",
"start": "webpack serve --open --config webpack.dev.js"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -33,10 +34,14 @@
"homepage": "https://github.com/dogeystamp/encryptme#readme", "homepage": "https://github.com/dogeystamp/encryptme#readme",
"devDependencies": { "devDependencies": {
"css-loader": "^6.7.3", "css-loader": "^6.7.3",
"css-minimizer-webpack-plugin": "^4.2.2",
"eslint": "^8.33.0", "eslint": "^8.33.0",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.7.2",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"webpack": "^5.75.0", "webpack": "^5.75.0",
"webpack-cli": "^5.0.1" "webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0"
} }
} }

46
webpack.common.js Normal file
View File

@ -0,0 +1,46 @@
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const pages = ["index", "aes"];
module.exports = {
entry: pages.reduce((config, page) => {
config[page] = `./src/${page}.js`;
return config;
}, {}),
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
clean: true,
},
optimization: {
splitChunks: {
chunks: "all",
},
},
plugins: [
new MiniCssExtractPlugin({
filename: "[contenthash].css",
chunkFilename: "[id].[contenthash].css",
}),
].concat(
pages.map(
(page) =>
new HtmlWebpackPlugin({
inject: true,
template: `./src/pages/${page}.html`,
filename: `${page}.html`,
chunks: [page],
})
)
),
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};

View File

@ -1,40 +0,0 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const pages = ["index", "aes"];
module.exports = {
mode: 'development',
entry: pages.reduce((config, page) => {
config[page] = `./src/${page}.js`;
return config;
}, {}),
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
},
optimization: {
splitChunks: {
chunks: "all",
},
},
plugins: [].concat(
pages.map(
(page) =>
new HtmlWebpackPlugin({
inject: true,
template: `./src/pages/${page}.html`,
filename: `${page}.html`,
chunks: [page],
})
)
),
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
};

10
webpack.dev.js Normal file
View File

@ -0,0 +1,10 @@
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
module.exports = merge(common, {
mode: "development",
devtool: "inline-source-map",
devServer: {
static: "./dist",
},
});

13
webpack.prod.js Normal file
View File

@ -0,0 +1,13 @@
const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = merge(common, {
mode: "production",
optimization: {
minimizer: [
"...",
new CssMinimizerPlugin(),
]
}
});