Static webpage webpack hotloader does not work

Question

Here is a repo I just created to get this issue solved: https://github.com/DevCubeHD/WebpackStaticPage

First of all: File structure. There are two important folders you should know to understand my example in case it isn't even convention. The /src folder is where all the raw content goes and the /dist folder is where the packed website goes by default. From there it is ready to deploy on any server. I'm not sure if development needs this directory anyways, but I hope you are.

I'm trying to set-up two webpack scripts for production and development. Production works fine: The script runs trough and the page is put into /dist.

In development I want to use webkit hotloader to instantly apply changes to the page just when I made some. It does run and the output seems very good, but when it comes to the page it stucks on [WDS] App hot update... and does not update the content. Even after a refresh of the page the content is still the old. The only thing that helps is running the production script.

To run the development script use yarn start or npm run start. For a fresh /dist directory you can use the production script yarn build or npm run build at the moment.

Please help me to fix the webback-dev-server so I can develop efficently. :) Thanks alot!

score 0 · Answer 1 · answered Aug 13 '18 at 09:39

0

You should use HotModuleReplacementPlugin from webpack.

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

Hot Module Replacement Plugin Link

answered Aug 13 '18 at 09:39

Praveenkumar Kalidass

429
4
12

Does not change anything since --hot and --inline is added to the yarn start script – Felix Gaebler Aug 13 '18 at 09:55
Have my repo for reference, i did the same and it is working for me. I started dev-server with just `webpack-dev-server` no `--hot` or `--inline`, as those are already configured in webpack config. – Praveenkumar Kalidass Aug 13 '18 at 09:57
my react app works either, but not my static webpage – Felix Gaebler Aug 13 '18 at 13:35

score 0 · Answer 2 · edited Jan 09 '19 at 07:23

0

I am able to achieve this by doing the following things,

Remove main.js and main.less from webpack entry points and only have index.html
Add HotModuleReplacementPlugin
Remove assets folder and putting all files in a single folder.

edited Jan 09 '19 at 07:23

Afaq Ahmed Khan

2,164
2
29
39

answered Aug 14 '18 at 06:56

Praveenkumar Kalidass

429
4
12

I will try have a short wait – Felix Gaebler Aug 14 '18 at 09:52
wait how should that even work? less and js wouldn't be in the the path – Felix Gaebler Aug 14 '18 at 09:58
I tried adding less file directly in the "link:href" and add it to the html loader, but for any reason it cannot handle them and throws an error like undefined.toString() is not a function – Felix Gaebler Aug 14 '18 at 09:59
include `main.js` and `main.less` in `index.html` – Praveenkumar Kalidass Aug 14 '18 at 09:59
I added attrs: ['img:src', 'link:href', 'script:src'] to the html-loader config and set and the same with js.. but im ending up with this error https://hastebin.com/odaweqogik.coffeescript – Felix Gaebler Aug 14 '18 at 10:09
`attrs` not required, only those `` ` – Praveenkumar Kalidass Aug 14 '18 at 10:10
well, how should the files be detected then? If the html-loader does not recognize them - nobody will, or am I wrong? – Felix Gaebler Aug 14 '18 at 10:15
Please be so kind and clone the repo to try it yourself - I almost tried everything myself - aaaand guessing is not the way we can solve this together – Felix Gaebler Aug 14 '18 at 10:17
okay, i already cloned the repo and worked on it, i will raise a pull request with those changes – Praveenkumar Kalidass Aug 14 '18 at 10:19

Static webpage webpack hotloader does not work

2 Answers2