Webpack – 如何在基础HTML中要求结果文件（最佳实践）
我刚开始使用Webpack进行SPA，我有一个问题。 我如何在我的HTML中需要结果包/文件？ 我应该使用标签还是有更好的做法呢？
您可以使用HTML Webpack Plugin自动包含所有JavaScript和CSS包。
例
要安装插件，您需要在项目目录中运行npm install html-webpack-plugin --save-dev 。
在下面的示例中，插件将读取源HTML文件，并在head文件和所有JavaScript包之前自动附加可用的CSS文件。 它与ExtractTextPlugin很好地搭配。 如果你有更多的分组块，他们也会被适当的添加。
作为奖励，你可以使用任何模板引擎，如果你想dynamic改变或生成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 Webpack插件有许多function可供使用，包括缩小 ，过滤块，向URL添加文件哈希以防止caching…您可以在文档中了解更多信息 。
您可以使用angular2 + webpack查看我的初学者种子。 所有文件已经在build立目录（app.js，vendor.js，polyfills.js）+地图
链接到webpack.config.js
Webpack是一个模块打包器。 它会根据您的webpackconfiguration将您的整个SPA捆绑在一个或多个JavaScript包中。 现在我们需要在我们的HTML代码中导入这些js包，而将这些东西插入到我们的HTML中的唯一方法是使用script标签。 所以你可以像这样在你的html中导入它们：
<script src="bundle.js"></script>
所以是的，这是最好的做法。