Link to the code repository: github.com/alexander-young/simple-webpack-wordpress
@Allformyequine
4 жыл бұрын
AwesomeSauce!! Thank you!
@calebgnz
3 жыл бұрын
Awesome video! Just quickly something that I ran into which is out of date in this video: When you go to config the options for postcss, you need to put the options into a postcssOptions object inside of the regular webpack loader options object like this: options: { postcssOptions: { plugins: [ require('tailwindcss'), require('autoprefixer') ] } } Otherwise it'll throw a compile error haha, spent ages trying to figure out why my code wasn't compiling
@pooya72
3 жыл бұрын
Same here. However I found that this works as well: options: { postcssOptions: { plugins: [ "tailwindcss", "autoprefixer", ], }, },
@ProffessionalPM
4 жыл бұрын
You have great content and huge potential with this channel, keep up the quality wp content and thank you for sharing your knowledge with us! 💪💯
@KapnKregg
3 жыл бұрын
Excellent primer for PHP and Webpack! I was able to get a basic PHP project up and running with this - even without Wordpress integration.
@eastwardape9841
4 жыл бұрын
You're the tutor, I was looking for. Sooooo glad to be your subscriber!
@gauravdeveloper
4 жыл бұрын
You are a good instructor. You have a good knowledge of WordPress. I have one question. Can you make a video in which we can select multiple authors for blogs? The co-authors-plus plugin works the same which I am talking about.
@WPCasts
4 жыл бұрын
Great idea!!
@travholt
4 жыл бұрын
Thanks for great videos! One thing that I, as a webpack novice, is constantly frustrated about is that almost every resource I can find assume that I know what's going on and what things mean. The amount of nesting and options and objects and arrays within eachother with no clear structure or explanation about how it all fits together is maddening. An example of something that is just assumed you know: What is a "loader"? What is it loading, where, how, and why?
@shbd1701
2 жыл бұрын
clean and simple tutorial, easy to understand. glad to find your channel and im a new subscriber to it. keep going and wish you the best...
@pooya72
3 жыл бұрын
VIDEO IS OUT OF DATE. Change webpack.config.js section on plugins to this: options: { postcssOptions: { plugins: [ "tailwindcss", "autoprefixer" ], }, }, webpack.js.org/loaders/postcss-loader/#autoprefixer
@mr.sandman8644
3 жыл бұрын
Thanks for this!
@fakegray
Жыл бұрын
In what way might this be different with Webpack 5?
@dashingpix
4 жыл бұрын
Great, experimenting with this for the last few days, and here you are :) . As you are going to continue just few suggestions for next episode - #1 - using SCSS #2 - out put more than one css files without creating extra entry points(not creating extra js files). if you cover these, that will be great.
@netstereo
4 жыл бұрын
He is using tailwindcss. Tailwindcss is a postcss plugin. With scss you have to preprocess your css. You can ditch scss with some postcss plugins
@Allformyequine
4 жыл бұрын
@@netstereo I like that about postcss
@Allformyequine
4 жыл бұрын
Thank you so much for doing this series!! Looking forward to the complete series, just what I was looking for! YAY!
@WPCasts
4 жыл бұрын
You are so welcome!
@MobiusCoin
4 жыл бұрын
What do you think about using Laravel Mix for all of this? That's what I've been doing for a year now. I love it!
@MobiusCoin
4 жыл бұрын
@Vasu Srivastava github.com/JeffreyWay/laravel-mix you can get it as a stand alone package!
@adgjk1
4 жыл бұрын
Looking forward to the series, thank you!
@QueenJneeuQ
4 жыл бұрын
This is the video i've been looking for, for ages!! I just have one question, how would this work with the wordpress theme directory, since you just have the index and functions where would the rest of the wordpress files be located? Also is this easy to incorporate Stylus instead of tailwind, I used to used stylus with webpack/wordpress but it was a very long time ago
@MobiusCoin
4 жыл бұрын
This is kind of up to you and your circumstances. Wordpress wasn't built with these modern tools in mind so you have to decide if you want this stuff on your remote server or only for dev purposes. I don't know if there is a universally accepted best practice. I've seen it all inside of wp-content before (where you'll see the node_modules folder right next to plugins and themes folder) but I've also seen configurations where it sits outside of Wordpress entirely and just builds the files into wp-content/themes/your-theme/css (for example).
@Allformyequine
4 жыл бұрын
See I wasn’t the only one :) !!!
@hwsOfficial
Жыл бұрын
I love you bro.
@ravimakwana1641
3 жыл бұрын
how can we use sass with our style.css and one more thing is how can we remove unused CSS from our website?
@SahilBuddhadev
3 жыл бұрын
Hey, your videos are great thanks for all tutorials. This video is outdated can you please re-upload these configurations 2021 update version video. Waiting for it.
@gudivakapraveen2313
3 жыл бұрын
Hi, Can you please help me with wordpress+webpack + react (if possible with lazy loading).
@Askbowe
3 жыл бұрын
Getting the following errors : ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'plugins'. These properties are valid:
@pooya72
3 жыл бұрын
Unfortunately the video is out of date. You need to change the plugin section to this: options: { postcssOptions: { plugins: [ "tailwindcss", "autoprefixer", ], }, }, See the example in webpack docs here: webpack.js.org/loaders/postcss-loader/#autoprefixer
@raj080288
3 жыл бұрын
Why are you adding the header and footer in index.js? Can I add my usual wordpress templates and files as normal for example full-width.php?
@xotic3196
3 жыл бұрын
I am on windows and my hosting is from Bluehost and i am new to coding, please tell me where i should put this code
@alinademi
3 жыл бұрын
Hey Alex, Keep uploading the good stuff!! Firstly, why you don't have a Udemy or.... course? you'll nail it with no doubt. 2nd, I'm very eager to see how you would do this setup not per page only(of course different entry points), but per page per component. Say I went granular in my component blocks and want to enqueue the assets of each element only if they are present. I assume I would have to create a folder for each component and put an index.js as well as the relative style.css in the folder like we do with react etc,. Then add each component as an entry point? then it will increase the number of chunks and will defy the purpose of minimal requests...., How to ask web pack to bundle the chunks for each page and still have separated components to share across different pages? this is the part that I am lost :D
@kalib-code
4 жыл бұрын
Thank you very much. very timely..
@carlosaltamera353
4 жыл бұрын
This is excellent! Thanks!
@gandalfdegrijze3144
2 жыл бұрын
Is that a bufallo bills cap? :p
@Mipon_en
4 жыл бұрын
Nice video, how can I add hot reloading to the webpack configuration?
@WPCasts
4 жыл бұрын
Take a look at the webpack docs, they have a section on HMR for stylesheets: webpack.js.org/guides/hot-module-replacement/#hmr-with-stylesheets
@Mipon_en
4 жыл бұрын
@@WPCasts Unfortunately it didn't work. Any plans to make a video about how to HMR and Sass on Wordpress Webpack?
@thangjamkishorchand
4 жыл бұрын
What are your thought on Elementor theme builder ?
@Denvercoder
4 жыл бұрын
Is there a way to implement HMR with this method?
@osherezra8460
4 жыл бұрын
Great Tutorial man thanks. can you elaborate how to use the Tailwindcss config in this setup? cheers
@WPCasts
4 жыл бұрын
I go over it briefly in today's video. I can do a more in-depth Tailwind video in the future
@lioritalmori
4 жыл бұрын
Could have used a bit of more introduction - like what is webpack why use webpack why we even want this etc. :))
@yahilmadakiya1023
4 жыл бұрын
Nice tutorial this is really help full. Also, may I know which keyboard you are using?
Hi, kindly update this video as the tailwind section will not work in 2023.
@user-oc9cf3vw8i
4 жыл бұрын
Hi I'm interested in your courses but I can't log in to the site wpcasts.tv -- I already subscribed earlier and it's just email exists msg
@WPCasts
4 жыл бұрын
My course isn't live yet. Still in the works :)
@fvgoya
4 жыл бұрын
1.89MB for main.css?? Ohh!!!! It's a LOT!
@mahditoosi2502
4 жыл бұрын
Why don't you just use laravel mix ??! soooo much easier
@olsheezy232
4 жыл бұрын
Prepros 4tw
@BiezdarJS
Жыл бұрын
Not working in 2023
@insanecuckooman8342
4 жыл бұрын
seriously? tailwind? why not just use inline css then? only slightly worse. back to 1995 i guess.
@tea42
2 жыл бұрын
new tailwind css loader setup: use: ['style-loader', 'css-loader', 'postcss-loader'] then leave other settings to tailwind.config.js and postcss.config.js. May this site help: levelup.gitconnected.com/setup-tailwind-css-with-webpack-3458be3eb547
Пікірлер: 59