An example app and presentation. Focused on implementing a modern JS SPA app using vanilla JS (especially WebComponents). Webpack is used for bundling and transpiling from newer versions of JavaScript.
For html highlighting in template literals, use es6-string-html
Visual Studio Code plugin.
Init npm in your local directory
npm init
Install webpack
npm i -D webpack webpack-cli
Open package.json and add to scripts the following:
{
// ....
"scripts": {
"build": "webpack",
// ....
}
}
Now, create src/index.js file.
Then, you can test it. Run
npm run build
Create webpack.config.js in your main directory.
npm i -D html-webpack-plugin html-loader
And paste in:
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
}
npm i -D webpack-dev-server
And to package.json
"start": "webpack-dev-server",
npm i -D @babel/core babel-loader @babel/preset-env
Add rule to webpack
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
}
]
},
npm i -D file-loader
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "file-loader",
}
]
},