DEV Community

Cover image for Mastering Webpack

Mastering Webpack

Kinanee Samson on January 12, 2021

Webpack for Beginners Series Learn how to use Webpack to bundle your code, manage your assets, automate easy processes and opti...
Read full post
Collapse
 
joshcheek profile image
Josh Cheek •

For displaying directory structures, check out tree:

$ tree bundle-app
bundle-app/
├── dist
│   └── index.html
├── package.json
├── package.lock.json
├── src
│   ├── hero.js
│   └── index.js
└── webpack.config.js

2 directories, 6 files
Enter fullscreen mode Exit fullscreen mode

If you're on a mac, brew install tree

Collapse
 
kalashin1 profile image
Kinanee Samson •

Okay, where can I get tree from??

Collapse
 
joshcheek profile image
Josh Cheek •

If you're on a mac: brew install tree

Collapse
 
abirana profile image
Abi Rana •

I was just checking your process and one of your initial command doesn't seems to be working
npx webpack ./index.js -o ./

it's throwing unknown command error

Collapse
 
kalashin1 profile image
Kinanee Samson • • Edited

Makes sure you install webpack first.. It could be as a result of webpack not being installed on your machine. Otherwise use the confirmation file.

Collapse
 
abirana profile image
Abi Rana • • Edited

I've installed the webpack, my issue seems to be different. Webpack-cli is not detecting webpack as a command. Can you help me with this?

Check this screenshot here dev-to-uploads.s3.amazonaws.com/i/...

Thread Thread
 
kalashin1 profile image
Kinanee Samson •

okay, try installing webpack and the webpack-cli globally, that should do the trick

Collapse
 
agredalex profile image
Alex Ágreda •

npx webpack --entry ./index.js -o ./ should work

Collapse
 
tiiunder profile image
Felix G •

Hopefully this is the last packaging tool and we all start using this one. Who remembers bower? :D

Collapse
 
fagnerbrack profile image
Fagner Brack • • Edited

this way our browser only ever loads a single JavaScript file that it needs to run and this significantly decreases load time

How does loading a single javascript file decreases load time? I assume a single javascript file would increase load time as the file will be bigger?

I'm confused...

Collapse
 
shwetabh1 profile image
Shwetabh Shekhar •

I was just about to dive into webpack. This helped. Thanks for sharing!

Collapse
 
kalashin1 profile image
Kinanee Samson •

I'm glad that you found it useful, you're welcome