Webpack Tutorial - Replace Gulp/Grunt plugins with a single tool

you are talking in a similar way like donald trump

When I try to open webpack.config.js using touch command as u mentioned, it says "touch is not recognized as internal or external command". Pls anyone who knows can reply n help

TypeError: webpack.optimize.OccurenceOrderPlugin is not a function

After webpack build jquery is still available on my page with "$.fn.jquery" in the console - did I do something wrong?

I know I could just create the webpack.config.js file myself but what is the windows command prompt equivalent to 'touch webpack.config.js' ?

To me its showing that "npm should run outside of the node repl, in your normal shell" whenever I am using the npm command in the node. Can't move forward :(

You kind of sound like the wolf of wallstreet actor Jonah Hill

I planned to learn React after learning your JS tutoria. Moved here and I am completely lost.

Any tip guys?

yes

This is really useful. I recently started learning ReactJS and I was a bit confused as to what is happening behind the scenes. This video explained it perfectly.

If you are watching this after 26th May 2017, please use this config file instead.


var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
context: __dirname,
devtool: debug ? "inline-sourcemap" : false,
entry: "./js/scripts.js",
output: {
path: __dirname + "/js",
filename: "scripts.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};



Why? Because this tutorial is on Webpack 1. We just need to tweak slightly to make it work with Webpack 2.
Changes
--------------

1. debug ? "inline-sourcemap" : false, <-- used to be null
2. removed dedupe plugin - it's no longer needed.

Hope this helps.

where is the html files? make the guide include them. how to make them go into dist folder?

Works !

haha, "If I Could Turn Back Time" - nice, thanks dude for the video

i hate your text editor. the document tree is too hard to decipher

awesome dude

"NODE_ENV=production webpack" not work for anyone else?

can the AMD be used in webpack 2?

I am having error when I write: NODE_ENV=production webpack

I am running windows 64-bit. From stackoverflow I had learned that to set the environment variable I would need to write

set NODE_ENV=production, Enter [this is coming out okay]
webpack, Enter [When I click enter it throws up an error]

Excellent tutorial, but why did you install webpack twice?

Hey there..I've installed webpack using npm -g install webpack. But while running webpack it is showing that command not found. Also when I use npm list webpack, then it is showing the correct location. But not working with webpack command. Kindly help, I am a beginner with React js. Thanks.

I have a question which I have asked several times but have received no solution at all. I hope this helps. So I have 2 folders in my src. app/ and js/. My app folder comprises of my react code and js/ basically comprises of my js code like jQuery, few plugins and other functionality codes. When using which I wanna keep each of these js codes from bundling i.e I don't want any of my code in js/ bundled instead just copied from src to dist folder. I am seriously in need of solution here guys coz all of this excluding the react part was a lot lot simpler with gulp. But just to learn a new tech I decided to make a switch to webpack. Please guys ... Thanks

Hi guys, this may seem to be a rookie question, but i actually do not know the tool that is being used in the npm examples. Is he using node.js command prompt, regular command prompt or what exactly. Also, how did the instructor connect his sublime text to the terminal where commands are being run? N00b here.

jquery remains strong preference.

what is the theme are you using in the sublime text 3? It looks really nice.

Great Tutorial !

Thank you. One bit of feedback though.. Installing webpack globally is recommended against by the documentation.

OccurenceOrderPlugin has been renamed to OccurrenceOrderPlugin.

This NODE_ENV=production webpack does not work here. It gives an error message regarding this and I don't know why.

2017-12-25
* new webpack.optimize.OccurrenceOrderPlugin* Occurrence with 2 "r"
* devtool: debug ? "inline-sourcemap" : false* devtool accepts strings or false

Amazing tutorial thanks! But gist needs to be updated for WebPack 2 version.

I'm getting this error, little help please,

TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor

Non working Node tutorial #4522897. Great job.

it would be immensely useful if I could see how you set up Sublime Text. My default view looks nothing like this, and in other videos I've learned how to use different software. I like the look of this application though and I'd love to see the basic run-through (so save myself time figuring it out on my own) of how you got from install to this starting view. From there the Webpack video would make much more sense. Thanks.

To get mine to work I had to
npm install -g webpack-cli

and change the line in the webpack.config.js:
entry: "./js/scripts.js",
to
entry: __dirname + "/js/scripts.js",
or I would get the following error
ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\admin\Documents\node\webpack2'

wow. mind-blowing.

Hey dude, these vids are super helpful! I'm building my first app with React, and your vids are coming in very handy.

cool. thanks

When i try to run the webpack command it says I need a webpack CLI

When I use create react app and npm start will host app on browser.. When I install web pack-dev-server then if I hit cmd npm start it won't host app in browser.. What is reason

You have a beautiful singing voice

can you make video on debugging as well

Thank you

Being the sucker for vanilla JavaScript I am, I still use only 1 just file, unless I have an universal nav that is same on every page, then I make another js file for the nav.

Thanks for your tutorials. I found I had to install and pin version 4 of webpack/cli (eg npm install --save-dev webpack@4 webpack-cli@4) and I had to set an environment variable (set NODE_OPTIONS=--openssl-legacy-provider) so that node provided what webpack v4 was requiring..
Then I had to also add the following to the webpack.config.js
mode: debug ? "development" : "production",
It has been 7 years since this video was made, after all.