#53 Setup Webpack and Babel for WordPress Theme | webpack wordpress theme development | webpack 4

webpack wordpress theme development
wordpress webpack 4
webpack plugin for wordpress
wordpress webpack boilerplate
wordpress webpack github
webpack 4 wordpress starter
browsersync webpack wordpress
webpack react wordpress
wordpress bundle js
Note:
1. Move the webpack.config.js into assets folder and
2. Remove the prefixed slash '/' from the JS_DIR, IMG_DIR and BUILD_DIR
github.com/imr...
Explained in the upcoming videos
----- SUBSCRIBE TO CHANNEL - www.youtube.co...
** Full Playlist **
codeytek.com/c...
** Github repo **
github.com/imr...
Please star my repo to support my work 🙏
** Please nominate me for Github Star **
stars.github.c...
****** Social Links *******
Please follow 🙏
Twitter - @codeytek
/ codeytek
Github - imranhsayed
github.com/imr...
****** Other Playlist *****
==== REACT TUTORIALS ====
codeytek.com/c...
==== REDUX TUTORIALS ====
codeytek.com/c...
==== REACT WITH WORDPRESS TUTORIALS ====
codeytek.com/c...
==== WEBPACK TUTORIALS ====
codeytek.com/c...
#wordpress #webpack #babel

[@stevanantic3019]

Packages that need to install - just copy paste :)
npm i webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader file-loader mini-css-extr
act-plugin optimize-css-assets-webpack-plugin cssnano style-loader uglifyjs-webpack-plugin cross-env -D

[@H0kage1160]

The current command for installing the right versioned packages: npm i webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader file-loader mini-css-extract-plugin css-minimizer-webpack-plugin cssnano style-loas-minimizer-webpack-plugin cssnano style-loader cross-env -D

[@PanchoMarconi]

Hi! optimize-css-assets-webpack-plugin and uglifyjs-webpack-plugin don't work with weback 5, so I've installed css-minimizer-webpack-plugin and terser-webpack-plugin

[@zoon-dot-com]

You are an underrated teacher! The only thing I like about you is that you try to dig deeper and mention how things work under the hood.

[@Codeytek]

Thank you!

[@BMikel]

Was looking for these 5 years.
Thank you

[@Codeytek]

Your welcome

[@h-ash1757]

I don't know why I am getting error when I was installing packages. have to provide flag of --force. does it have negative impacts?

[@sachin6689]

U provided video on wp which i was looking for from long time u r great sir

[@Codeytek]

Enjoy

[@TrungLuongphp]

Hi Bro, I run code " npm i webpack@^4.44.1 webpack-cli@^3.3.12 @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader file-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin cssnano style-loader uglifyjs-webpack-plugin cross-env -D" but it has error with Cross-Site Scripting & Remote Code Execution. Please help me solves this. Thanks you!

[@yohdev]

Great video!! Question... Do you have any pointers on how a child theme would work with this setup?
We would want the ability to add some custom stuff per child theme and would need the ability to overwrite sass vars.
Any ideas? My buddy and I are struggling to make a child theme.

[@Codeytek]

Same set up.
Please follow this
developer.wordpress.org/themes/advanced-topics/child-themes/

[@sylvainjacot1427]

npm i webpack web pack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader file-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin cssnano style-loader uglifyjs-webpack-plugin cross-env -D

[@russellazim6589]

Bro , I am beginner, And I just want know why we use webpacke our theme

[@Codeytek]

So that we can create components in modular pattern which makes it easy to work on those pieces of code and functionality in isolation and Webpack can bundle them together at build time into one file.
You can watch this series to know more about Webpack benefits
ua-cam.com/play/PLD8nQCAhR3tRSHDQDZi3jGSgQ_9VNY4gu.html

[@BMikel]

Please provide instructions how to include into project not only SCSS , but SASS syntax as well (either / or).

[@Codeytek]

.. Just uploaded one more with sass rules..
ua-cam.com/video/_KqJzhnjEjI/v-deo.html
I have already recorded one's with sass, including fonts, images files, all power packed, more on the way under editing currently.

[@a_zhary]

Awesome 👏 I am very glad that I have subscribed to your channel. Thank you!!!

[@Codeytek]

Welcome

[@pasizdobrekuce]

npm i webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader file-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin cssnano style-loader uglifyjs-webpack-plugin cross-env -D

[@zonyzipper7589]

I get errors installing packages

[@xotic3196]

how did your command know it was to execute in wordpress please help. i am on windows btw

[@xotic3196]

if you see this please reply bro my website desperately needs speed and no cache, optimizer, defer, async, minify plugin can help it that much. I need code splitting please

[@LittlePropheteer]

The command was run inside of the assets directory