javascript 如何使用 webpack 将 html、js 和 css 捆绑在一个 html 文件中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46866228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to bundle html, js and css in one html file with webpack?
提问by Kannaiyan
I have built my application with webpackmerging all css into one file, all js into one file and having one html for my SPA app.
我已经使用webpack构建了我的应用程序，将所有 css 合并到一个文件中，所有 js 合并到一个文件中，并为我的 SPA 应用程序创建了一个 html。
When I do my testing with webpagetest most of my issues is not with loading the files but loading them as individual files.
当我使用网页测试进行测试时，我的大部分问题不在于加载文件，而是将它们作为单个文件加载。
html+css+js=index.html
html+css+js=index.html
How do I pack my html, css and js into a single index.html, so I can avoid http overhead?
如何将我的 html、css 和 js 打包到一个 index.html 中，这样我就可以避免 http 开销？
Webpack or any webpack plugin is better, since we are already using it.
Webpack 或任何 webpack 插件更好，因为我们已经在使用它。
Thanks for any direction on this.
感谢您对此的任何指导。
采纳答案by andykenward
I use html-webpack-plugininject the output from Webpack into a index.html file.
我使用html-webpack-plugin将 Webpack 的输出注入到 index.html 文件中。
Assuming you mean you want to inline all those files into one http request of index.htmlyou can use html-webpack-inline-source-pluginto achieve this.
假设您的意思是要将所有这些文件内联到index.html您可以html-webpack-inline-source-plugin用来实现此目的的一个 http 请求中。
回答by junvar
shameless plug incoming
无耻的插件进来
I found webpack too heavy weight, especially when I'm already using browserify to inline my require()'s. So I wrote a ~30 line npm cli package using JS's string.replace:
https://www.npmjs.com/package/inline-scripts.
Usage, $ inline-scripts src/index.html out/index.html
我发现 webpack 太重了，尤其是当我已经使用 browserify 来内联我require()的 . 所以我使用 JS 编写了一个 ~30 行的 npm cli 包string.replace：https:
//www.npmjs.com/package/inline-scripts。用法，$ inline-scripts src/index.html out/index.html
