SHARE

Hey ninjas, in this Webpack for beginners tutorial, I’ll show you how to install Webpack, and then how to use it to bundle all of our JavaScript into a single, production-ready file.

—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/webpack-playlist
+ Atom editor – https://atom.io/
+ Download GIT – https://git-scm.com/

CSS Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

HTML Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

NODEJS Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== PSD to WordPress Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W

============ Node.js for Beginners Playlist =============

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

21 COMMENTS

  1. Great series on webpack, love pace and all. The only suggestion I'd make is, consider using a monospaced font suitable for source code instead of Futura, or whatever it is that you're using. There are many benefits, like being able to tell the difference between zeros and the letter "o", and the number one and lowercase "L". Keep up, and thanks for the intro to webpack!

  2. how do i prevent my js files from being bundled into bundle.js i.e i have 2 folders in my src. js/ and app/. js/ contains all my other js code like jquery, few plugins and other functionality codes. app/ folder on the other hand contains only my react code. I am currently struggling with this. What i am trying to achieve is this, only copy my js/ code into my dist/ folder and let my react code bundle in bundle.js. I dont wanna bundle my .js code in my js/ but just copy them from src/ to dist/ folder. Please help i really need a solution to this. Thanks Net Ninja!

  3. Solution for those who get : webpack command not found

    In package.json file write build property like this

    script:{
    "build":"webpack script-1.js bundle.js"
    }

    Now from cmd/bash

    npm run build

  4. How is it that you dont run anything and when you open localhost it is working? I cant get mine to work like yours can you help? I did everything you did and dont get a localhost connetion

  5. I'm sorry, I can't install webpack into this branch because my npm says "npm ERR! 404 – 'webpack–save-dev' is not in the npm registry. You should bug the author to publish it (or use the name yourself!)".

    How I solve this problem, thank you.

  6. Hi I need a help. My webpack command to join different js script is not working and when I try to install the global version of webpack I have a error related to permission denied. Can you help me please?

  7. can't get atom to recognize my git repository, tried googling everything i could think of but nothing worked. I can manipulate the repository thru the git shell fine.

  8. Trying to follow along on Linux Mint but get to the "webpack script-1.js ./bundle.js" and it returns: "webpack: command not found" Maybe additional/different steps required for Linux? I'll have to do some research.

  9. Is webpack similar to es6 management of modules where you use the follow syntax : import testmod from './second'; and then only reference that one main JavaScript file ? or does this have a different use? I am slightly confused if I should be using this instead of es6 module imports.

  10. Quick question, whenever you make changes to one of the js files, do you have to run the bundle command again or webpack auto compiles your changes whenever you hit save?

LEAVE A REPLY

Please enter your comment!
Please enter your name here