feat: set up webpack with Babel and SASS
This commit sets up webpack as the module bundler along with configurations for transforming ES6+ code using Babel and compiling SASS into CSS. It includes necessary dependencies such as `babel-loader`, `sass-loader`, `css-loader`, `style-loader`, and plugins like `mini-css-extract-plugin` to extract CSS into separate files. This setup facilitates the development of a modern web application by enabling the use of the latest JavaScript features and streamlined CSS pre-processing.
This commit is contained in:
commit
932f8f98b1
GPG key ID:
ECBCC9082395383F
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
lib/
|
||||
node_modules/
|
||||
21
index.css
Normal file
21
index.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
.error-box {
|
||||
background-color: black;
|
||||
border: 1px solid white;
|
||||
padding: 20px;
|
||||
max-width: 600px;
|
||||
}
|
||||
.error-box h1 {
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
color: red;
|
||||
}
|
||||
35
index.html
Normal file
35
index.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Browser Error</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="./index.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="error-box">
|
||||
<h1 class="mb-4">
|
||||
FATAL ERROR: <span class="browser"></span> Detected
|
||||
</h1>
|
||||
<p class="mb-4">
|
||||
Due to a bug in <span class="browser"></span>, this website is
|
||||
temporarily inaccessible for anyone using the browser.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
I apologize for the inaccessibility. As this site is now public I will
|
||||
be revisiting this bug to try and find a work around. If I fail, I
|
||||
believe there is a PR currently in review for
|
||||
<span class="browser"></span> that attempts to fix the regression.
|
||||
Whether or not that will fix the bug is unknown. Updates will be posted
|
||||
here.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
In the mean time if you want to access this site you will need to use a
|
||||
different browser.
|
||||
</p>
|
||||
<p>Thank you - Kumi</p>
|
||||
</div>
|
||||
<script src="./lib/index.bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
4431
package-lock.json
generated
Normal file
4431
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
33
package.json
Normal file
33
package.json
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "@kumitterer/great-website",
|
||||
"version": "0.0.0",
|
||||
"description": "A great website",
|
||||
"main": "lib/index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build": "webpack --mode production",
|
||||
"build:dev": "webpack --mode development",
|
||||
"watch": "webpack --mode production --watch",
|
||||
"watch:dev": "webpack --mode development --watch"
|
||||
},
|
||||
"repository": "https://git.private.coffee/kumi/great-website",
|
||||
"author": "Kumi",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.24.0",
|
||||
"@babel/preset-env": "^7.24.0",
|
||||
"babel-loader": "^9.1.3",
|
||||
"css-loader": "^6.10.0",
|
||||
"mini-css-extract-plugin": "^2.8.1",
|
||||
"postcss-loader": "^8.1.1",
|
||||
"sass": "^1.71.1",
|
||||
"sass-loader": "^14.1.1",
|
||||
"style-loader": "^3.3.4",
|
||||
"webpack": "^5.90.3",
|
||||
"webpack-cli": "^5.1.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ionic/core": "^7.8.2",
|
||||
"bowser": "^2.11.0"
|
||||
}
|
||||
}
|
||||
16
src/index.js
Normal file
16
src/index.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import "@ionic/core";
|
||||
|
||||
const Bowser = require("bowser");
|
||||
|
||||
const browser = Bowser.getParser(window.navigator.userAgent).parsedResult
|
||||
.browser.name;
|
||||
|
||||
console.log(browser);
|
||||
|
||||
const spans = document.querySelectorAll(".browser");
|
||||
|
||||
console.log(spans);
|
||||
|
||||
spans.forEach((span) => {
|
||||
span.textContent = browser;
|
||||
});
|
||||
57
webpack.config.js
Normal file
57
webpack.config.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
const path = require("path");
|
||||
|
||||
const miniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const autoprefixer = require('autoprefixer');
|
||||
|
||||
module.exports = {
|
||||
entry: "./src/index.js",
|
||||
output: {
|
||||
path: path.resolve(__dirname, "lib"),
|
||||
filename: "index.bundle.js",
|
||||
},
|
||||
plugins: [new miniCssExtractPlugin()],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
presets: ["@babel/preset-env"],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ["style-loader", "css-loader"],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
{
|
||||
// Adds CSS to the DOM by injecting a `<style>` tag
|
||||
loader: "style-loader",
|
||||
},
|
||||
{
|
||||
// Interprets `@import` and `url()` like `import/require()` and will resolve them
|
||||
loader: "css-loader",
|
||||
},
|
||||
{
|
||||
// Loader for webpack to process CSS with PostCSS
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
postcssOptions: {
|
||||
plugins: [autoprefixer],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// Loads a SASS/SCSS file and compiles it to CSS
|
||||
loader: "sass-loader",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
Loading…
Reference in a new issue