Webpack Tutorial for Beginners #2 - Installing Webpack & Bundling JS Files

Показать описание

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:

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

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

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

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

Рекомендации по теме

Комментарии

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!

igorputina

For those who are having problems in implementing it in 2020, kindly proceed to the next video because that is the standard, having a configuration file for webpack, please note that [in next video] you must set path to -> path: `${__dirname}/dist` [ please note that they are not single ticks but they are back ticks normally present above your tab button in keyboard ]

MuhammadSaaddev

I wish all tutors were like you! You're my first reference each time that I wanna learn something FUN!!! :) Only wish you were into Phaser-3 :) :) THANK YOU!

nuno

In 2020 use
node_modules/.bin/webpack script-1.js
instead, output file will be in:
/dist/main.js

cedric_ds

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

Naniy

cannot get past min 6:25.
Get ERROR in main - Module not found: Error: Can't resolve './bundle.js'
Tried all suggestions in previous posts but still not working. any suggestions? (doing this in May2021...

thekuzicartoon

For anyone who's getting the error:

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
ERROR in multi script-1.js ./bundle.js
Module not found...

It looks like Webpack may have changed recently and you need to explicitly state the output file and the mode. Try the command:

webpack script-1.js --output ./bundle.js --mode development

chrishalley

This is incredibly helpful. Thank you!

ryed

how did you run the localhost and port 3000 without having to setup in nodejs? like express setup

allain

How does webpack deal with CDN like jquery?

pivu

What is the difference between:
npm install webpack --save-dev
npm install webpack -g

johnconnor

Please, could you help.
I have installed webpack but when I try to bundle js files it says:
"webpack is not recognized as a internal or external command, operable program or batch file"

johnconnor

Bash does not recognize the webpack command, keep throwing "bash: webpack: command not found";

mujeexminiminer

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?

baybay

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.

tj

use 'node_modules/.bin/webpack' to get it work locally

ajaytanwar

whoever try this now will not get bundle, js file. You will get a file called Main.js in dist folder instead :)

purnimadhubhashi

i use php to include files all time. Should i use webpack as well or can php do this?

rw

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.

briangoodman

everytime i try to run webpack command it throws up with

One CLI for webpack must be installed. These are recommended choices, delivered as seperate packages :
- webpack-cli (--url--)
-webpack-command

Even after installing these, it is prompting again and you please tell me, what i'm doing wrong here....

kunalvirk

Webpack Tutorial for Beginners #2 - Installing Webpack & Bundling JS Files

Webpack Tutorial for Beginners #2 - Installing Webpack & Bundling JS Files

WHAT IS WEBPACK, HOW DOES IT WORK? | Webpack 2 Basics Tutorial

THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial

USING THE WEBPACK DEV SERVER | Webpack 2 Basics Tutorial

Webpack Tutorial for Beginners #3 - The webpack.config File

Learn Webpack - Full Tutorial for Beginners

Webpack 5 Crash Course | Frontend Development Setup

WEBPACK + MULTIPLE HTML FILES | Webpack 2 Basics Tutorial

Module Bundlers Explained... Webpack, Rollup, Parcel, and Snowpack

Webpack Tutorial #1 - Was ist webpack? Wie funktioniert webpack?

webpack tutorial for beginners | webpack installation and configuration( part-2)

Webpack 2 vs Grunt Gulp || Webpack 2 Tutorial For Beginners 01

Webpack 4 Tutorial - Getting Started for Beginners

BASIC BABEL + SCSS WORKFLOW | Webpack 2 Basics Tutorial

#2 Set up Webpack | Install Webpack | Webpack Tutorial

Webpack Tutorial for Beginners #4 - Babel Loaders

Webpack 2 - A full tutorial

Webpack Tutorial #2 - Bundler

NPM Webpack tutorial for beginners (2/3) - Webpack Optimization

ReactJS Basics - #2 Setup Workspace with Webpack

WEBPACK 2 TUTORIAL #1 - Introduction & Workspace Setup

Webpack Tutorial #2 Build for basic JavaScript App

Webpack 2 Tutorial - Installation and Config

React Tutorial #2 - Setup with Webpack (& without)