Can not get it running properly about django-webpack-loader HOT 12 CLOSED

<script src="main-4809d8e09cbc474f2d6a.js"></script></body>

This looks like your STATIC_URL was not picked up because it should have started with /static. What I would suggest to try add publicPath: '/static' to webpack config and see if that works. Google "webpack publicPath"

from django-webpack-loader.

1. I read in one of the closed issues that Django-webpack-loader solution is aimed at .js and .css ; So not images and other static items. Is that correct y/n? If yes, how should you treat 'other items': the Django way, or the JS way (or choose?). Does it makes sense to just 'build a bridge' for js and css ?

In modern day application, JS and CSS (or even just JS) are the "entry points" of your frontend applications. They will internally load and use other things like images, videos, etc. Only case where Django would need direct access to images or other files is when you want to reference them directly in a django template and not inside JS/CSS. To address this, we have an undocumented template tag. It is undocumented because I'm not sure yet what to name it exactly and how it should work. You can check an example here: https://github.com/owais/django-webpack-loader/blob/b91c62b57c23784c8f2554437909da4cacd2df80/tests/app/templates/home.html#L12-L13
Also, the idea is that the result of your webpack bundle will be collected by django usng collectstatic so all files generated/managed by webpack should be available to django's static tag as well.

from django-webpack-loader.

1. I read in one of the closed issues that Django-webpack-loader solution is aimed at .js and .css ; So not images and other static items. Is that correct y/n? If yes, how should you treat 'other items': the Django way, or the JS way (or choose?). Does it makes sense to just 'build a bridge' for js and css ?
2. Following the article it says "If you left webpack running in watch mode, it should automatically pick up the changes and compile a new bundle." I tried a simple Django project to make things more clear for myself, but automatic rebuilding is not happening... It just compiles the same bundle once (no new hash), no error... nothing new.

This is not really a problem specific to webpack-loader. It is directly related to webpack. I'd suggest to check webpack docs and ask this on webpack repo for better help (I'll check your example and try to help shortly)

from django-webpack-loader.

3. I did manage to have webpack build script run and then have new bundles compiled (when I imported new js libraries), so that seems to work fine; also the bundle-tracker gets new correct hash, so that seems fine. However, I tried to incorporate the js and css into a page, it does not work I think. Part of the problem is I do not know if I test correctly. Your article gives the setup/framework but no real proof of working js or css as far as I can see. In my setup for sure I only see html layout so the css is not coming through from the bundle...

As long as {% webpack_static 'my-image.png' %} produces the correct URL for the bundle, it can be considered to be working.

from django-webpack-loader.

4. I do not know exactly how the css should work. It seems that it should be included into the main-hash.js bundle and is import into html from that bundle... Is that correct? Could there be a detailed example of how to go about. For example I would like to use bootstrap which consists of bootstrap.js and bootstrap.css; Do I import both from the index.js and then they will be included in the bundle and then using the {% load render_bundle from webpack_loader %} {% render_bundle 'main' %} ? An example with bootstrap and/ or materialcss would be very helpful. Also when I have a custom.css, how do I include it?

Normally webpack will create a single bundle for JS and CSS. JS bundle will then automatically load the CSS into the page. You can use https://github.com/webpack/extract-text-webpack-plugin to split your bundles in JS and CSS.

from django-webpack-loader.

5. I do not really need the react part; I assume that is not a dealbreaker and using django-webpack-loader still makes sense?!

webpack-loader knows nothing about react or even webpack. It just reads a manifest file and render <script> and/or tags for URLs found in the file. It would work if you made browserify or even rails sprockets generate a valid manifest file.

from django-webpack-loader.

6. After you made a bundle with webpack and want to go live, do you include the bundle in a 'normal Django static folder'? It seems to be explained somewhere but it is still not really clear to me.

That is the simplest solution for most cases, yes but you are not limited to it.

from django-webpack-loader.

Thanks for you helpful comments. I added publicPath: '/static' to webpack config and now it indeed starts with /static/main-etc in the index.html However my css is still not appearing in my pages..., so what else is wrong?

So regarding question 4, you mention: "JS bundle will then automatically load the CSS into the page". How are CSS files included in the JS bundle? By importing them in index.js ?
And what/how loads the CSS automatically, as this is not happening in my case?

from django-webpack-loader.

So regarding question 4, you mention: "JS bundle will then automatically load the CSS into the page". How are CSS files included in the JS bundle? By importing them in index.js ?

Yes, by importing them as if they were JS modules. This would be a better question to ask in the webpack community as you'd get better answers there. You should also read this: https://webpack.github.io/docs/stylesheets.html

from django-webpack-loader.

Ok, so the css is included in the bundle, but how is the bundle loaded into my Django html templates?

from django-webpack-loader.

Ok, so the css is included in the bundle, but how is the bundle loaded into my Django html templates?

https://github.com/owais/django-webpack-loader#templates

from django-webpack-loader.

Works now. Seems the "import '../star-rating';"; was causing problems somehow... Furthermore I left out the "publicPath: '/static' " to make it work.

from django-webpack-loader.