First of all, I'm completely new to web development so if my approach is totally wrong, just say so.
I want to automate build of sass and ts files, so I read about Gulp/Webpack, and seems like webpack is the way to go.
I am building a simple single page website and for now I only have a small javascript that's needed, so it makes sense in my mind that the entry point for webpack should be the html file itself. However, all the docs and tutorials only talk about starting from a .js
.
Is there a way to start from the HTML and resolve js, css, images and other required stuff?
Should I just scrap using webpack and just use gulp to compile the typescript and sass?
To configure Webpack to bundle HTML we'll use our first plugin, a dependency called HtmlWebpackPlugin. Remember, loaders offer functionality to files before Webpack bundles them, whereas plugins modify the entire bundle itself.
The entry object is where webpack looks to start building the bundle. The context is an absolute string to the directory that contains the entry files.
Use webpack to build your JS assets and it will create a . html file with all assets imported in. Run yarn dev , and hopefully after a few sections you will see a dist directory was created with your JS files included.
The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation.
One alternative would be to use Parcel, which supports having a HTML file as the entry.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With