https://github.com/white-gecko/mwe-self-contained-html
A minimal self contained HTML file that includes JavaScript and CSS in one file. Built with webpack and Jekyll.
https://github.com/white-gecko/mwe-self-contained-html
css html javascript jekyll mwe webpack
Last synced: 3 months ago
JSON representation
A minimal self contained HTML file that includes JavaScript and CSS in one file. Built with webpack and Jekyll.
- Host: GitHub
- URL: https://github.com/white-gecko/mwe-self-contained-html
- Owner: white-gecko
- License: mit
- Created: 2022-02-18T13:17:31.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-18T13:41:16.000Z (over 3 years ago)
- Last Synced: 2025-01-15T02:59:35.781Z (4 months ago)
- Topics: css, html, javascript, jekyll, mwe, webpack
- Language: JavaScript
- Homepage:
- Size: 42 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MWE Self Contained HTML File
This example shows how to produce a self contained html file with [webpack](https://webpack.js.org/) and [jekyll](https://jekyllrb.com/). In this case the [bootstrap](https://getbootstrap.com/) framework is used as an example.
To run this example you need node js and ruby with bundler.
```bash
$ make install
$ make build
```
Setting the `mode` in `webpack.config.js` to `development` results in a not minified output of JavaScript and CSS, while setting it to `production` will minify the JavaScript and CSS.
It is also possible to include everything just in JavaScript without producing a CSS section.
This can be achieved by changing the `rules` section to :
```javascript
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader",
],
},
],
```
However, I suggest to separate JavaScript and CSS, so that browsers with disabled JavaScript still see your styles. Anyhow, a lot can be done with CSS alone, there is not always a need for JavaScript.