问题
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?
回答1:
One alternative would be to use Parcel, which supports having a HTML file as the entry.
回答2:
Strictly speaking, you can't do what you ask for your entire application
[use] HTML as a Webpack entry point
HTML files can't reference local files in your hard drive (there are templating systems, but that is a different thing). HTML files are served by a server and can only reference remote files.
With Webpack you'll be using different loaders that are able to perform different operations on files depending on what file type they have.
What you can do is:
- use HTML as a Webpack entry point for your other HTML files, if you are using a templating library or HTML imports
- use a JS file as a Webpack entry point (usually index.js) for all your JS files
- both outputs then are placed in a
distfolder and the HTML output will reference your JS output, but not with a relative or absolute path (disk), it'll do it with a remote resource locator. The standard for those is the Uniform Resource Locator, a URL (relative URL). Pardon the overly detailed (pedantic) description, I just want to explain as clear as possible the reasons behind it all.
However, all the docs and tutorials only talk about starting from a .js.
For a simple website, like a single page site, usually the HTML doesn't go through any preprocessing at all. And, the only action taken during the build step is to move the file from src to dist, that is why tutorials tend to focus on the JS side.
From the description of your project, it seems like a good place for you to start experimenting with is the html-loader It supports common features like minifying, resolving images paths etc.
来源：https://stackoverflow.com/questions/55082181/html-as-webpack-entry-point