Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/israel-laguan/configuring-webpack-examples
Repository with example configuration in diferent use cases
https://github.com/israel-laguan/configuring-webpack-examples
Last synced: 21 days ago
JSON representation
Repository with example configuration in diferent use cases
- Host: GitHub
- URL: https://github.com/israel-laguan/configuring-webpack-examples
- Owner: Israel-Laguan
- License: mit
- Created: 2020-04-20T20:02:25.000Z (over 4 years ago)
- Default Branch: one-js
- Last Pushed: 2023-05-25T16:19:44.000Z (over 1 year ago)
- Last Synced: 2023-05-25T17:25:17.270Z (over 1 year ago)
- Language: JavaScript
- Size: 220 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues-open][issues-open-shield]][issues-open-url]
[![Issues-closed][issues-closed-shield]][issues-closed-url]
Webpack setup: One JS output
Learn by example how to setup a webpack web project
🖊️
Read the article
🐞
Report a Bug
🙋♂️
Request Feature
# The Project
Repository with example configuration in diferent use cases
# Features
- Basic VanillaJS app with a single script or few commands
- `npm` and `node` for javascript code
- `webpack` for bundling
# Prerequisites
- `npm` 6.14 +
- `node` 12.16 +
- A Text Editor like VSCode
# Getting Started
First step is to create a folder, then inside we initialize `npm`:
```bash
npm init -y
```
```bash
npm i -D webpack webpack-cli
```
If you will only need one output JS file the only remaining thing to make is a folder called src/ and inside a file called index.js. Inside of this file you can put you code, call other files and import CSS. Now please open your file called [package.json](package.json) and in the section called "scripts" like this:
```json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack"
},
```
All that code will be output into a new file inside dist/ folder just using this command `npm start`. You'll notice the new folder and a file called main.js will be produced.
This file have already minified and uglyfy code, ready for copy/paste in your HTML!
# 👨 Author
# 🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check the [issues page](https://github.com/Israel-Laguan/configuring-webpack-examples/issues).
# 🤗 Show your support
Give a ⭐️ if you like this project!
# 📝 License
This project is licensed under the [MIT](LICENSE)\
Feel free to fork this project and improve it
[contributors-shield]: https://img.shields.io/github/contributors/Israel-Laguan/configuring-webpack-examples?style=plastic
[contributors-url]: https://github.com/Israel-Laguan/configuring-webpack-examples/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/Israel-Laguan/configuring-webpack-examples?style=plastic
[forks-url]: https://github.com/Israel-Laguan/configuring-webpack-examples/network/members
[stars-shield]: https://img.shields.io/github/stars/Israel-Laguan/configuring-webpack-examples?style=plastic
[stars-url]: https://github.com/Israel-Laguan/configuring-webpack-examples/stargazers
[issues-open-shield]: https://img.shields.io/github/issues/Israel-Laguan/configuring-webpack-examples?style=plastic
[issues-closed-url]: https://github.com/Israel-Laguan/configuring-webpack-examples/issues
[issues-closed-shield]: https://img.shields.io/github/issues-closed/Israel-Laguan/configuring-webpack-examples?style=plastic
[issues-open-url]: https://github.com/Israel-Laguan/configuring-webpack-examples/issues
