For anyone having trouble with extract-text-webpack-plugin or getting an error like " DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead " try using npm install --save-dev extract-text-webpack-plugin@next the newest version of the plugin isnt compatible with webpack 4 so after a bit of google and comment searching this was the solution i found and everything works :D Also thanks @Academind this series is exactly what I needed to get started with Webpack! Keep up the great work!
Now getting this ERROR in ./src/js/app.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' Any idea how to fix it? Should I switch to mini-css-extract-plugin?
I recently tried to create some tutorials and ran into all the issues you normally run into when creating them. This let's me appreciate your videos even more. Thanks for the hard work.
Max, again, a huge THANK YOU is in order for your excellent practical explanations and examples. Hope you are monetizing your efforts in a big way, as you are helping thousands of people like me do their jobs better and put food on our tables. Thanks for sharing.
You know what I love about learning this way? I can "interrupt" you 50 times (aka: pause) as I flip between this video and my code, and you will never get upset! ;-) Thanks again, wonderful series!
This tutorial is so awesome. I was a bit confused on a practice project I'm doing with webpack so I decided to go back and do another tutorial. You're really great at breaking it down. Thank you so much!
I am loving studying Vue.js and I want to apply with the webpack, for this I want to learn the webpack well to advance in the optimization of both tools.
UPDATE - March - 2019 Okay so I encountered some issues while trying to run the project with this configuration.. How I resolved this -> I uninstalled babel-core and babel-preset-es2015 --> npm uninstall babel-core babel-preset-es2015 And installed @babel/core and @babel/preset-env --> npm install @babel/core @babel/preset-env extract-text-webpack-plugin@next --save-dev And now my first object in the rules array looks like this : { test : /\.js$/, use : [ { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } ] }, //changed the presets key above.. package.json --> "devDependencies" : { "@babel/core": "^7.3.4", "@babel/preset-env": "^7.3.4", "babel-loader": "^8.0.5", "css-loader": "^2.1.1", "extract-text-webpack-plugin": "^4.0.0-beta.0", "node-sass": "^4.11.0", "sass-loader": "^7.1.0", "webpack": "^4.29.6", "webpack-cli": "^3.2.3", "webpack-dev-server": "^3.2.1" } and now my project is working fine
You do a really good job explaining Webpack. Finally I understand what I'm doing all the time in my configs ;-) Till now it was mostly copy and paste from different sources
Thank you very much Max for the entire webpack series and for all the courses on udemy that you create for us. I have learned a lot of things that I always believed too much difficult for me. I will keep studying with you!
Hey Max, I've benefitted so much professionally and personally from all the videos you do. I've got all your courses on Udemy! Keep up the great work man.
Max just pour the knowledge just into our heads. That's how good teacher he is. I enjoyed all courses of Max that I've watched. The only one that I did not enjoy much is ES6 in which he explained lotss of topics but not very well. Not in a practical way to be more precise.
Your teaching style is just ADDICTIVE, having the ability to explain COMPLICATED things in clear and simple way and you seem magically know and not afraid or hesitant to repeat salient points that seem hard to grasp for the first time and we really appreciate that so much , never boring moment. Some say it is better than watching Netflix and to me it is true. Please never try to change it.. don't even think about it. You should thread carefully on any advice given that criticises your teaching style. My professional programming background is Java and I am avid subscriber of most of your courses on Udemy. Regards from Australia
Thanks Max for being awesome!!! I am trying to learn JS and your videos have been helping me understand the concepts. If some one is looking for latest version(babel-loader 8 and mini-css-extract-plugin to extract SCSS) Below are the latest versions of webpack.config.js/package.json which worked for me. webpack.config.js var path = require('path') var webpack = require('webpack') const MiniCssExtractPlugin = require("mini-css-extract-plugin"); var miniCssExtractPlugin = new MiniCssExtractPlugin({ filename: 'main.css' }) module.exports = { entry: './src/js/app.js', output: { path: path.resolve(__dirname, 'dist'), // Gives absolute path filename: 'bundle.js', publicPath: '/dist' // Tell webpack internal server about the path to pick the filename from }, // Define below to tell webpack to use to use this while analyzing the files module: { rules: [ { test: /\.js$/, use: [ { loader:'babel-loader', options:{ presets: ['@babel/preset-env'] } } ] }, { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', ] } ] }, plugins: [ miniCssExtractPlugin ] } package.json { "name": "webpackTutBabelSCSS", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode development", "build:prod": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.3.3", "@babel/preset-env": "^7.3.1", "babel-loader": "^8.0.5", "babel-preset-es2015": "^6.24.1", "css-loader": "^2.1.0", "mini-css-extract-plugin": "^0.5.0", "node-sass": "^4.11.0", "sass-loader": "^7.1.0", "webpack": "^4.29.5", "webpack-cli": "^3.2.3" }, "dependencies": { } }
Am i to late in 2020 ? Egal, weil das is einfach super genialer content Max! Ich ziehe mir mehrere Videos parallel rein und Deine Serie hilft mir extremst weiter :-) Vielen Dank !!! Habe auch extra meinen AdBlocker ausgeschalten ;-)
Hey everyone -- ETWP (Extract Text Webpack Plugin) has been deprecated. The last supported version of WebPack that they supported was version 3. This is from the Github Read me: ⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead. Here is the link to Mini CSS Extract Plugin: github.com/webpack-contrib/mini-css-extract-plugin Oh and the UA-cam series is terrific @academind
Video is helpful I need one help I am using SASS and TS with webpack. When I put sass main file to main.ts webpack throw me error while compile as it is not able to recognize @
He wants the js and css separate. He's just using WebPack to process each individually. They aren't actually combined. The flowchart at the end helps show this.
@Academind I have just one question, after run webpack-dev-server, on localhost:8080 was just view of my files, so i needed to add --content-base dist/ behind webpack-dev-server , and then copy my file index.html into dist folder manualy too... any tips why ? - github.com/uragecz/webpack_scratch btw i am using webpack 3.1.0
Yo Max, what are the chances you would do a deployment build webpack video?? I know a lot of people that struggle with optimising for this! Great series!
@Academind In webpack 4 extract-text-plugin does not effect pages via hot reloading. I had to add fallback: style-loader into webpack.config then disabled extract-text-plugin. After that i tried to remove extract-text-plugin and it is still working. Only difference is production mode can not generate css file. It injects style codes into bundle.js file. I think it is better. So i think we do not have to use extract-text-plugin right ? Thanks.
Maximilian, since you are really good at explaining things, I wonder if you would consider making a tutorial on functional programming in JS. Thank you much.
Nice and clear thanks :) Would you be able to expand on this and explain how to use 3rd party css libraries e.g. bootstrap and font awesome in addition to your own sass files where 3rd party mixins are imported from those 3rd party libraries?
Max is awesome. Very talented instructor. I learned a lot from his tutorials. One question. Why didn't we use a .babelrc file for the presets? What is the difference of doing this inside webpack.config? Thanks! :)
I like all your videos and Udemy training videos as well because when any developer attends your video he will definitely get more experience. I would like to request you please upload the webpack+react and grunt+react configuration videos.
Thanks for the awesome tutorials. I would have a question, in your tutorials you work with only one html file, but what would you do you do if you had multiple html files. Could you pack some kind of global css file for your project + one specific css file for each of your html file (same question with .js files) ? And is there a way to automatically do the process for each html file. Let's say, you have global.css, global.js for your project, and for each 'any.html', you want to pack 'global.scss, any.scss, global.js, any.js' into 'bundle-any.js' and 'any.css'. Is it possible ? Thanks
hi iam trying to use .sass files instead of .scss file to compile with webpack.. But doesnt seems to compile. Iam able to run on dec but cant compile in on prod
This is the third time I am unable to minify the main.scss but I got main.css converted on page inspect source but main.css not got minified infact bundle.js too please help me to this
This is the best video I saw for web pack and babel. You have really covered small details which other videos made by other persons have not, I am a novice in the node and react field so I really enjoyed your videos. Do you have any Udemy course available for react.js
Thank you so much for your fantastic feedback Saurabh, so great to read that you like the videos! Yes, I do have a very comprehensive React course on Udemy and I would be very happy to welcome you on board: www.udemy.com/react-the-complete-guide-incl-redux/?couponCode=ACADEMIND_REACT
Hey Mindspace, Mindspace is a place where all learn new things which is hot nowadays. I have some confusion about webpack build tool and others like glup and grunt. Right now i am using glup task runner, please let me know if possible, why we use webpack over glup. Gulp is easy to configuration i think. Also right now i am middle of webpack series, not completed yet. Thanks Mindspace.
Hey Max, do you plan to make some kind of fullstack course on Udemy? I've seen that you have new React course, it seems good, but it would be great if you'd make MERN stack course, I'd be glad to buy it cause I like your way of teaching.
Certainly an interesting idea and also certainly something I've been playing around with in my head, I just got some other course ideas I want to do first :)
Hi, I love to see your videos its awesome and easily understandable. Could you please provide me a SCSS workflow like how to we integrate it into our project and get start work with it.
Tried npm install --save-dev extract-text-webpack-plugin@next and now getting this ERROR in ./src/js/app.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' Any idea how to fix it? Should I switch to mini-css-extract-plugin?
It is an IDE from JetBrains, possibly WebStorm or PHPStorm. It is very powerful but not the fastest. Almost certainly slower than Atom. If Atom seems too slow to you then maybe your computer needs an upgrade.
I love Breaking Bad and Narcos but these series are even better and more addictive ;)
Haha, really awesome to hear that Igor ;)
Hilarious! And true.....
There is no better teacher then you in the whole galaxy. You explain so clearly, so easily, that impossible not to understand something.
Thank you so very much Hovik, this is really just awesome to hear! It means a lot to me :)
For anyone having trouble with extract-text-webpack-plugin or getting an error like " DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead " try using npm install --save-dev extract-text-webpack-plugin@next the newest version of the plugin isnt compatible with webpack 4 so after a bit of google and comment searching this was the solution i found and everything works :D Also thanks @Academind this series is exactly what I needed to get started with Webpack! Keep up the great work!
Thank you
you made my night bro
Now getting this ERROR in ./src/js/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core' Any idea how to fix it?
Should I switch to mini-css-extract-plugin?
This is because extract-text-webpack-plugin is now deprecated for use with css. Instead you are recommended to use mini-css-extract-plugin
github.com/webpack-contrib/extract-text-webpack-plugin#usage
I recently tried to create some tutorials and ran into all the issues you normally run into when creating them. This let's me appreciate your videos even more. Thanks for the hard work.
Thank YOU for your awesome feedback Horst!
Max, again, a huge THANK YOU is in order for your excellent practical explanations and examples. Hope you are monetizing your efforts in a big way, as you are helping thousands of people like me do their jobs better and put food on our tables. Thanks for sharing.
Thanks for your amazing feedback Gary, it's really great to hear that the content I create here is helpful to you and others! :)
This really is as clear and understandable as I can imagine a Webpack tutorial being. Thanks again, Max!
You know what I love about learning this way? I can "interrupt" you 50 times (aka: pause) as I flip between this video and my code, and you will never get upset! ;-) Thanks again, wonderful series!
Haha, that's true, thanks so much for your awesome comment, great to read that you like the series :)
I have my job because of you. You are a great teacher. God bless
So great to read that Sagar, thanks a lot for your comment!
This video was awesome, so simplified and clear to shed light on webpack.
The starting minutes you dedicate to explain context are invaluable.
This tutorial is so awesome. I was a bit confused on a practice project I'm doing with webpack so I decided to go back and do another tutorial. You're really great at breaking it down. Thank you so much!
Thank YOU! Happy to hear you're liking it!
Your videos are really good Maximilian, you give a very good introduction of how WebPack works. Thank you for sharing this with us!!
Awesome to read that you liked it Abel, thank you for your comment!
NO. 1 tutor of Udemy @Max....... for ever!!!!!
Thanks so much Dheeraj!
Welcome Max you are my guru...Love your tutorials....They are so Informatic...
I really like the way you explain and make things clear...how to use it and why to use it...you're a awesome teacher !!👍
I follow you now on youtube as well as udemy and I am glad to say that I have cleared angular2 interview with your udemy and youtube courses.
One of the best videos I've seen on webpack.
Congratulations!
So happy to read that, thanks so much for your comment Andre!
I am loving studying Vue.js and I want to apply with the webpack, for this I want to learn the webpack well to advance in the optimization of both tools.
It's really precise and very clear. Thanks Maximilian!
UPDATE - March - 2019
Okay so I encountered some issues while trying to run the project with this configuration.. How I resolved this ->
I uninstalled babel-core and babel-preset-es2015 --> npm uninstall babel-core babel-preset-es2015
And installed @babel/core and @babel/preset-env --> npm install @babel/core @babel/preset-env extract-text-webpack-plugin@next --save-dev
And now my first object in the rules array looks like this :
{
test : /\.js$/,
use : [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
]
},
//changed the presets key above..
package.json -->
"devDependencies" : {
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
}
and now my project is working fine
Dude, you're the greatest! I nearly started crying from that all's not working, your solution sorted it just fine!
You do a really good job explaining Webpack. Finally I understand what I'm doing all the time in my configs ;-) Till now it was mostly copy and paste from different sources
Happy to read that the video was helpful for you Michael, thanks a lot!
Thank you very much Max for the entire webpack series and for all the courses on udemy that you create for us. I have learned a lot of things that I always believed too much difficult for me. I will keep studying with you!
Amazing to hear that Paulo, thanks so much for your great feedback! I'll do my best to keep the videos coming :)
Gr8 content max! minute details explained in a fab way
So cool to read that Rajiv, thanks a lot for your great feedback!
MInd Blowing Explanation!!!.You make things really easy to understand:).
So awesome to read that, thanks so much Kapil :)
amaaazing dude, sending you my greetings from Egypt
Hey Max, I've benefitted so much professionally and personally from all the videos you do. I've got all your courses on Udemy! Keep up the great work man.
Awesome to hear that and thanks so much for your great feedback - I'm really happy to have you as a student! :)
Max just pour the knowledge just into our heads. That's how good teacher he is. I enjoyed all courses of Max that I've watched. The only one that I did not enjoy much is ES6 in which he explained lotss of topics but not very well. Not in a practical way to be more precise.
man, web in 2017 is soo complicated. It's easier to be a rocket scientist nowadays :))
You are right - it really got way more complex over the last years. I'll try to make it at least a bit easier. :D
thanks a lot Academind! your videos are very educational. helps a lot
No it's not.
Greetings from a rocket scientist^^
Love this series. I can feel my mind expanding! :)
That's awesome to hear, thanks so much Jackson!
Dude you are an awesome human being. That's all I can say. God Bless your soul. Respect
Raymond, I can only say THANK YOU for such an amazing support, I am really thankful for comments like this and people like you, YOU are awesome :)
Your teaching style is just ADDICTIVE, having the ability to explain COMPLICATED things in clear and simple way and you seem magically know and not afraid or hesitant to repeat salient points that seem hard to grasp for the first time and we really appreciate that so much , never boring moment. Some say it is better than watching Netflix and to me it is true. Please never try to change it.. don't even think about it. You should thread carefully on any advice given that criticises your teaching style. My professional programming background is Java and I am avid subscriber of most of your courses on Udemy. Regards from Australia
No worries, I'll keep my style and I'm really happy to get feedback like yours. That's just amazing! :)
I really would be interested in how the SCSS-LOADER works with autoprefix and moreover how you can concat the modernizr with the bundle.js
It is a good tutorial. One side you are right, it can replace Gulp. On the other side how can you make an automatization with webpack like gulp watch?
If you're using the webpack-dev-server, it'll watch for changes (and reload your browser) automatically.
Thanks.
Hi! Simple and great tutorial for webpack beginners. Thank you so much!
Thank you Alex!
Thanks Max for being awesome!!! I am trying to learn JS and your videos have been helping me understand the concepts.
If some one is looking for latest version(babel-loader 8 and mini-css-extract-plugin to extract SCSS)
Below are the latest versions of webpack.config.js/package.json which worked for me.
webpack.config.js
var path = require('path')
var webpack = require('webpack')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var miniCssExtractPlugin = new MiniCssExtractPlugin({
filename: 'main.css'
})
module.exports = {
entry: './src/js/app.js',
output: {
path: path.resolve(__dirname, 'dist'), // Gives absolute path
filename: 'bundle.js',
publicPath: '/dist' // Tell webpack internal server about the path to pick the filename from
},
// Define below to tell webpack to use to use this while analyzing the files
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader:'babel-loader',
options:{
presets: ['@babel/preset-env']
}
}
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
]
}
]
},
plugins: [
miniCssExtractPlugin
]
}
package.json
{
"name": "webpackTutBabelSCSS",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode development",
"build:prod": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.3.3",
"@babel/preset-env": "^7.3.1",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^2.1.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"webpack": "^4.29.5",
"webpack-cli": "^3.2.3"
},
"dependencies": {
}
}
Thank you so much for these informative tutorials... Love the content and the approach you go about to teach. You're doing an awesome job Max...:)
So awesome to read that! Thank you so much for your support Priya :)
Could u please provide some suggestion or probably make a video on how to convert multiple .pug files to .html file dynamically? Thanks :)
Am i to late in 2020 ?
Egal, weil das is einfach super genialer content Max!
Ich ziehe mir mehrere Videos parallel rein und Deine Serie hilft mir extremst weiter :-)
Vielen Dank !!!
Habe auch extra meinen AdBlocker ausgeschalten ;-)
Wow, vielen Dank für dein super Feedback, das freut mich natürlich sehr!
is there any video or course of your how to use scss in react
Hey everyone -- ETWP (Extract Text Webpack Plugin) has been deprecated. The last supported version of WebPack that they supported was version 3.
This is from the Github Read me:
⚠️ Since webpack v4 the extract-text-webpack-plugin should not be used for css. Use mini-css-extract-plugin instead.
Here is the link to Mini CSS Extract Plugin:
github.com/webpack-contrib/mini-css-extract-plugin
Oh and the UA-cam series is terrific @academind
man , that's too much config to handle for a novice. Good thing is Max explains all with too much enthusiasm. Thanks for sharing :)
Thanks so much! :)
great video, great explanation for us beginners! Thanks mate.
Thank YOU for sharing this great feedback :)
I like the expression when he says Internet Explorer! lol 11:40
Video is helpful I need one help I am using SASS and TS with webpack. When I put sass main file to main.ts webpack throw me error while compile as it is not able to recognize @
Great videos Max! :) Thanks
Thank you Rob!
Hey nice tutorial man, But i am not able to create main.css....there is no main.css in dist folder...I used the same code from your github
I can now see the light! Thank you :)
Could you guys please do an updated version of this series with webpack 4?
Definitely something I have on the idea list
Hey academind. If you add code splitting to this playlist, then it would be perfect ;).... please ? :D
What about multiple entries with a couple of html files?
I've tried, but it doesn't work correct with dev server.
Simply an awesome tutorial. Thank you very much for sharing!
Happy to hear that it was helpful, thanks for your nice feedback Kayla!
Great content, very well explained, thanks Max!
That's really great to read Julia, thank you very much for your awesome feedback!
Awesome stuff, thanks sir, one query, how we create multiple theme based react web app using postcss and webpack?
fantastic the way you explain is wonderful and perfect ..
really very very helpful ..thank you very much..please keep doing
It honestly means a lot to me to get such a wonderful feedback, thank you very much! I'll try my best to keep it going :)
Not sure I understand why to go to all this trouble to combine .js with .css only to separate them at a later stage...
To show if you want to, you could :D
He wants the js and css separate. He's just using WebPack to process each individually. They aren't actually combined. The flowchart at the end helps show this.
Bro, u are awesome, u help me so much ! Keep working on ! (subscribed)
Thanks so much and welcome on board! I'll try my best to keep it going ;)
@Academind I have just one question, after run webpack-dev-server, on localhost:8080 was just view of my files, so i needed to add --content-base dist/ behind webpack-dev-server , and then copy my file index.html into dist folder manualy too... any tips why ? - github.com/uragecz/webpack_scratch btw i am using webpack 3.1.0
Yo Max, what are the chances you would do a deployment build webpack video?? I know a lot of people that struggle with optimising for this! Great series!
Thanks for the suggestion Josh. Not planned for the near term at least, mostly because I got so many other things I want to cover first
@Academind
In webpack 4 extract-text-plugin does not effect pages via hot reloading. I had to add fallback: style-loader into webpack.config then disabled extract-text-plugin. After that i tried to remove extract-text-plugin and it is still working. Only difference is production mode can not generate css file. It injects style codes into bundle.js file. I think it is better. So i think we do not have to use extract-text-plugin right ? Thanks.
An excellent tutorial, Maximilian! :-)
Thank you Flemming!
Hi Max. Is the order of the rules important?
Max I Love You
Thank YOU so much Elin, so awesome to read that you like the series :)
Excellent explanations!
Thank you very much Tay!
great content, but i have one question, can you show us how to implement autoprefixer?
Thanks for your suggestion! Can't promise it, but I'll note it as an idea
source maps and image compression would also be nice :)
Second this! This would be great
Thanks Max . you are tutorial are great as always.
Thank YOU for your amazing feedback!
Maximilian, since you are really good at explaining things, I wonder if you would consider making a tutorial on functional programming in JS. Thank you much.
Thanks for your suggestion! I got many ideas to be honest and time is the limiting factor. I'll note this idea, too but can't promise anything
Nice and clear thanks :)
Would you be able to expand on this and explain how to use 3rd party css libraries e.g. bootstrap and font awesome in addition to your own sass files where 3rd party mixins are imported from those 3rd party libraries?
Max is awesome. Very talented instructor. I learned a lot from his tutorials.
One question. Why didn't we use a .babelrc file for the presets? What is the difference of doing this inside webpack.config?
Thanks! :)
I like all your videos and Udemy training videos as well because when any developer attends your video he will definitely get more experience.
I would like to request you please upload the webpack+react and grunt+react configuration videos.
Could you explain hot module reload how to use it
With the updates posted by @Yash Raj Arora, that all actually worked. Hard to believe.
Awesome Tutorials. I would like to see server side rendering too!..
Thanks for the suggestion and great feedback!
Thanks for the awesome tutorials. I would have a question, in your tutorials you work with only one html file, but what would you do you do if you had multiple html files. Could you pack some kind of global css file for your project + one specific css file for each of your html file (same question with .js files) ? And is there a way to automatically do the process for each html file. Let's say, you have global.css, global.js for your project, and for each 'any.html', you want to pack 'global.scss, any.scss, global.js, any.js' into 'bundle-any.js' and 'any.css'. Is it possible ? Thanks
Very good and cognitive videos... Thanx for this
Thanks so much, awesome to hear that!
Is there a way when the css get extracted to dist folder that it change the path of images?
hi iam trying to use .sass files instead of .scss file to compile with webpack.. But doesnt seems to compile. Iam able to run on dec but cant compile in on prod
This is the third time I am unable to minify the main.scss but I got main.css converted on page inspect source but main.css not got minified infact bundle.js too please help me to this
It's an awesome tutorial. Thanks for sharing!
Thanks for your nice feedback, I'm glad to hear you're liking the videos!
Thanks for the great videos =)
Really understood the core of webpack =)
Happy to hear that, thanks for the nice feedback! :)
thank you so much for this. very clear tute
Great to read that I could make things clear for you Jary, thank you for your comment.
Thank you Max! Helpful!
Great to hear that - thank you so much!
By the 2020, its process has changed a lot...
Excellent tutorial. Thanks.
Very good. Thanks for this.
Awesome to hear that Eric, thanks so much!
This is the best video I saw for web pack and babel. You have really covered small details which other videos made by other persons have not, I am a novice in the node and react field so I really enjoyed your videos. Do you have any Udemy course available for react.js
Thank you so much for your fantastic feedback Saurabh, so great to read that you like the videos! Yes, I do have a very comprehensive React course on Udemy and I would be very happy to welcome you on board: www.udemy.com/react-the-complete-guide-incl-redux/?couponCode=ACADEMIND_REACT
YOU ARE THE BEST 😭💖
Hey Mindspace,
Mindspace is a place where all learn new things which is hot nowadays.
I have some confusion about webpack build tool and others like glup and grunt.
Right now i am using glup task runner, please let me know if possible, why we use webpack over glup. Gulp is easy to configuration i think. Also right now i am middle of webpack series, not completed yet.
Thanks Mindspace.
Great explanation, great video. Thanks
So happy to read that Ivan, thank you for your comment!
Hey Max, do you plan to make some kind of fullstack course on Udemy? I've seen that you have new React course, it seems good, but it would be great if you'd make MERN stack course, I'd be glad to buy it cause I like your way of teaching.
Certainly an interesting idea and also certainly something I've been playing around with in my head, I just got some other course ideas I want to do first :)
Hi,
I love to see your videos its awesome and easily understandable. Could you please provide me a SCSS workflow like how to we integrate it into our project and get start work with it.
Thanks a lot Mukesh - also for the suggestion. I'll probably do more Webpack videos again and I'll try to then also dive into this.
Tried npm install --save-dev extract-text-webpack-plugin@next and now getting this ERROR in ./src/js/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core' Any idea how to fix it?
Should I switch to mini-css-extract-plugin?
This helped babeljs.io/docs/en/env/ run npm install @babel/preset-env and have "presets": ["@babel/preset-env"] in your configuration.
Awesome, thank you
Thanks for the video Max :)
Thank YOU for your comment Eddy :)
Hey amazing series :) . I was wondering if you can make a video explaining how to setup webpack with angular 4?
Certainly possible that I'll do that in the future - I'll keep it in mind!
+George Zoone i though webpack is already used by default in angular 4
this guy is the best ....
YOU are the best Eric, thanks so much for your awesome support!
what's the difference between weback,grunt,gulp? ;>
Thanks alot max , you're amazing
Thank YOU - happy to hear you're liking it!
I got a weird problem where the outputted files have taken on the compiled styles in the browser, but there is no dist folder in my actual directory?
The dist/ folder is only created if you run npm run build:prod.
Thanks Max!
Nice tutorial! Keep it up!
Happy to read that Raja, I'll try my best to keep it up!
Sehr gut! Danke.
Es freut mich sehr dass dir das Video gefällt Igor, vielen Dank!
amazing, thank you @max
You're welcome - happy to hear you're liking it!
Currently, extract-text-webpack-plugin is deprecated for Webpack 4...
Absolutely godlike :)
Wow, amazing to hear that! Thanks a million!
Simply awesome!
Thank you so much Róbson!
Great tutorial! Thank you :)
Happy to hear you're liking it, thanks a lot!
What's the name of that IDE? I think Atom is too slow, also VS Code. I'm trying Geany now.
It is an IDE from JetBrains, possibly WebStorm or PHPStorm. It is very powerful but not the fastest. Almost certainly slower than Atom. If Atom seems too slow to you then maybe your computer needs an upgrade.
It indeed is Webstorm, yes
It's an i5. I suppose programmers don't change their CPUs that often. And I've seen other people complain.
what part is slow ? The overall UI or what ? I use Atom and it works just fine I'm using an m3 processor