https://github.com/porobertdev/webpack-es6modules-practice

https://github.com/porobertdev/webpack-es6modules-practice

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/porobertdev/webpack-es6modules-practice
• Owner: porobertdev
• Created: 2024-02-20T05:04:03.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-02-25T16:38:55.000Z (10 months ago)
• Last Synced: 2024-02-26T16:50:15.900Z (10 months ago)
• Language: JavaScript
• Size: 6.44 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# webpack-es6modules-practice

## About

I'm learning about Webpack and ES6 Modules from [The Odin Project](https://www.theodinproject.com/lessons/node-path-javascript-es6-modules), and started this while following the official tutorial from Webpack, then I did some extra stuff to practice more, specifically the constructors module.

## File Structure

```

webpack-es6modules-practice

├─ dist

│  ├─ index.html

│  ├─ main.js

│  └─ main.js.LICENSE.txt

├─ src

│  ├─ constructors.js

│  ├─ functionOne.js

│  ├─ index.js

│  └─ myName.js

├─ README.md

├─ package-lock.json

├─ package.json

└─ webpack.config.js

```

**`dist`**: distribution folder aka public, holding the bundled js file built by Webpack.

**`src`**: the source code of the project

**`package.json`**: file generated by `npm init -y` and updated after installing modules with `npm install moduleName --save / --save-dev`. It also holds npm scripts.

**`package-lock.json`**: same, but has more information about the specific versions of modules and their dependencies

**`webpack.config.js`**: custom config that can be used to tell Webpack which files to use as entry points, the output dir and file name etc.

## How To Use

Simply run `npm install` and open `dist/index.html`, then check the console. If you make changes, then run `npx webpack` or `npm run build` (`build` script from `package-lock.json`). Additionally, `npm run watch` will automatically build and run the new code as you make changes.