Webpack lesson: Tutorial bug fix

[dawrentz]

Webpack lesson: Tutorial bug fix

[MaoShizhong]

This wouldn't be a bug. From the sounds of it, your watch npm script runs webpack --watch, i.e. upon every change to the dependency graph or other files in the bundle, re-run the bundling. When that happens, the clean: true option under output will clear your dist directory before it outputs the resulting bundle into it.

This doesn't have anything to do with webpack-dev-server. If you're using the dev server, you won't need to also run webpack --watch. The dev server is standalone, then once you're ready to bundle and deploy, you bundle then deploy dist.

If you want to use webpack's watch mode, then you won't use webpack-dev-server.

What's happening is that because you haven't set a template for HtmlWebpackPlugin, it's going to delete everything in dist (including any changes you made to dist/index.html) before it bundles. What you're supposed to do as per the lessons and Restaurant Page project, is have an HTML file in src, then set that as the template for HtmlWebpackPlugin. You don't do any development work in dist at all - that's reserved purely for what Webpack outputs when you bundle things.

If you're still having problems with understanding any part of the Webpack lessons, feel most free to pop in our community Discord and write up a detailed and specific question, and I'm sure someone will be able to help you with whatever issue you're running into!

[dawrentz]

Thanks, Mao. I'll take a look at it again and make sure I'm getting it.

…

On Mon, Jul 15, 2024 at 2:40 PM MaoShizhong ***@***.***> wrote: This wouldn't be a bug. From the sounds of it, your watch npm script runs webpack --watch, i.e. upon every change to the dependency graph or other files in the bundle, re-run the bundling. When that happens, the clean: true option under output will clear your dist directory before it outputs the resulting bundle into it. This doesn't have anything to do with webpack-dev-server. If you're using the dev server, you won't need to also run webpack --watch. The dev server is standalone, then once you're ready to bundle and deploy, you bundle then deploy dist. If you want to use webpack's watch mode, then you won't use webpack-dev-server. What's happening is that because you haven't set a template for HtmlWebpackPlugin, it's going to delete everything in dist (including any changes you made to dist/index.html) before it bundles. What you're supposed to do as per the lessons and Restaurant Page project, is have an HTML file in src, then set that as the template for HtmlWebpackPlugin. You don't do any development work in dist at all - that's reserved purely for what Webpack outputs when you bundle things. If you're still having problems with understanding any part of the Webpack lessons, feel most free to pop in our community Discord and write up a detailed and specific question, and I'm sure someone will be able to help you with whatever issue you're running into! — Reply to this email directly, view it on GitHub <#28414 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BFLT46KMB4LDN5TEL526QFTZMQQR5AVCNFSM6AAAAABK5BX55OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRZGI2DONZZGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>