Webpack -如何在基html中要求结果文件(最佳实践)
Webpack -如何在基html中要求结果文件(最佳实践)
提问于 2017-01-20 19:19:55
我刚开始用Webpack做我的SPA，我有一个问题。如何在HTML中要求结果包/文件？我应该只使用标签还是有更好的练习？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-01-20 20:00:17
您可以使用JavaScript自动包含所有的HTML Webpack插件和CSS包。
示例
要安装插件，需要在项目目录中运行npm install html-webpack-plugin --save-dev。
在下面的示例中，插件将读取源HTML文件，并在head和所有JavaScript包中的body结束之前自动追加可用的CSS文件。它和ExtractTextPlugin玩得很好。如果您有更多的包块，它们也会被适当地追加。
另外，如果您想动态地更改或生成任何模板文件的一部分，您可以使用HTML。它支持EJS模板引擎，并可能使用任何其他通过装载机。
var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/entry', // Source JavaScript file
output: {
path: './bin/', // Output directory
filename: "./js/bundle.js" // Result JavaScript file
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // Source HTML file
filename: './index.html' // Result HTML file
}),
]
};值得注意的是HTML插件有许多特性可供使用，包括缩小、过滤块、向URL添加文件哈希以防止缓存.您可以在文档中了解这些以及更多的信息。
Stack Overflow用户
发布于 2017-01-20 19:40:03
Webpack是个模组打手。根据webpack的配置，它将将整个SPA捆绑在一个或多个javascript包中。现在，我们需要在HTML代码中导入这些js包，在HTML中插入这些东西的唯一方法是使用脚本标记。所以您可以在html中导入它们，如下所示：
<script src="bundle.js"></script>所以是的，这是最好的做法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41770894
复制相关文章
相似问题
腾讯云开发者
