Skip to content

Instantly share code, notes, and snippets.

💭
Creativity is the art of application of learning.

Anurag Majumdar anurag-majumdar

View GitHub Profile
View build-sw.js
const glob = require('glob');
const fs = require('fs');
const dest = 'dist/sw.js';
const staticAssetsCacheName = 'todo-assets-v1';
const dynamicCacheName = 'todo-dynamic-v1';
let staticAssetsCacheFiles = glob
.sync('dist/**/*')
.map((path) => {
View sass-webpack.config.js
module.exports = {
entry: {
// Mention Entry File
},
output: {
// Mention Output Filenames
},
module: {
rules: [
{
View reduce-template.js
const WorkModel = [
{
id: 1,
src: '',
alt: '',
designation: '',
period: '',
description: ''
},
{
View babel-webpack.config.js
module.exports = {
entry: {
// Mention Entry File
},
output: {
// Mention Output Filenames
},
module: {
rules: [
{
View .babelrc
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
View todos-webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = (env, argv) => ({
entry: {
View todos-package.json
{
"name": "vanilla-todos-pwa",
"version": "1.0.0",
"description": "A simple todo application using ES6 and Webpack",
"main": "src/main.js",
"scripts": {
"build": "webpack --mode production && node build-sw",
"serve": "webpack-dev-server --mode=development --hot"
},
"keywords": [],
View app.template.js
export const appTemplate = model => `
<section class="app">
<h3> ${model.title} </h3>
<section class="button">
<button class="btn-todo"> Todo Module </button>
</section>
</section>
`;
View app.component.js
import { appTemplate } from './app.template';
import { AppModel } from './app.model';
export const AppComponent = {
init() {
this.appElement = document.querySelector('#app');
this.initEvents();
this.render();
},
View app.js
import { appTemplate } from './app.template';
import { AppModel } from './app.model';
export const AppComponent = {
// App Component code here...
};
You can’t perform that action at this time.