diff --git a/README.md b/README.md index 69a06e0..eee2875 100644 --- a/README.md +++ b/README.md @@ -12,4 +12,5 @@ This is a sandbox for projects using react.js. * [fare-zones-table](./fare-zones-table) * [login-auth](./login-auth) * [pages](./pages) -* [webpack-react](./webpack-react) +* [webpack for vanilla JavaScript](./webpack-js) +* [webpack for react with vanilla JavaScript](./wp-react) diff --git a/wp-js/.gitignore b/wp-js/.gitignore new file mode 100644 index 0000000..f992571 --- /dev/null +++ b/wp-js/.gitignore @@ -0,0 +1,108 @@ +# Others +package-lock.json +build* + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env +.env.test + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# Next.js build output +.next + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +# Comment in the public line in if your project uses Gatsby and *not* Next.js +# https://nextjs.org/blog/next-9-1#public-directory-support +# public + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port diff --git a/wp-js/README.md b/wp-js/README.md new file mode 100644 index 0000000..0cecf20 --- /dev/null +++ b/wp-js/README.md @@ -0,0 +1,11 @@ +# webpack-js + +## Table of Contents +0. [General](#general) +1. [Links](#links) + +# General + +# Links + +* [React setup with webpack for beginners](https://dev.to/deepanjangh/react-setup-with-webpack-for-beginners-2a8k) diff --git a/wp-js/package.json b/wp-js/package.json new file mode 100644 index 0000000..0fc3d14 --- /dev/null +++ b/wp-js/package.json @@ -0,0 +1,24 @@ +{ + "private": true, + "name": "webpack-js", + "description": "example using webpack for vanilla JavaScript", + "version": "0.0.1", + "main": "index.js", + "keywords": [ + "react", + "webpack" + ], + "author": "Software Ingenieur Begerad ", + "license": "GPL-3.0-or-later", + "engines": { + "node": ">=10" + }, + "scripts": { + "start": "webpack serve --config ./webpack.config.js --mode development" + }, + "devDependencies": { + "webpack": "^5.73.0", + "webpack-cli": "^4.9.2", + "webpack-dev-server": "^4.9.2" + } +} diff --git a/wp-js/public/index.html b/wp-js/public/index.html new file mode 100644 index 0000000..dab22fc --- /dev/null +++ b/wp-js/public/index.html @@ -0,0 +1,13 @@ + + + + + React with webpack + + +
+

Hello Webpack

+
+ + + diff --git a/wp-js/src/index.js b/wp-js/src/index.js new file mode 100644 index 0000000..eb171b6 --- /dev/null +++ b/wp-js/src/index.js @@ -0,0 +1 @@ +console.log("Hello World") diff --git a/wp-js/webpack.config.js b/wp-js/webpack.config.js new file mode 100644 index 0000000..f6f548c --- /dev/null +++ b/wp-js/webpack.config.js @@ -0,0 +1,12 @@ +//path is used to resolve properly across the OS +const path = require('path'); + +module.exports = { + //bundle *.js from this entry point + entry: path.resolve(__dirname, './src/index.js'), + //create output file to be linked to index.html + output: { + path: path.resolve(__dirname, './public'), + filename: 'bundle.js', + }, +};