什么是 template 模板
在前端开发中，我们会使用各种模板引擎来简化页面的开发。其中，template 模板是一种常见的模板引擎，它的语法类似于 HTML，可以通过变量绑定来渲染页面。
Webpack 中的 template 模板
Webpack 是一个前端打包工具，它的一个重要功能就是可以将多个 JavaScript 文件打包成一个文件。在 Webpack 中，我们可以使用 template 模板来生成打包后的 HTML 文件。
Webpack 中的 template 模板语法和普通的 template 模板语法类似，不同之处在于我们可以在 template 中使用一些 Webpack 定义的变量，来引用打包后的 JavaScript 文件。
Webpack 变量
在 Webpack 中，我们可以通过插件或配置文件，来定义一些变量，这些变量可以在 template 模板中使用。
常用的 Webpack 变量有：
bundle
这个变量可以用来引用打包后的 JavaScript 文件，它的值由 Webpack 自动生成。
例如，我们可以在 template 模板中使用这个变量来引用打包后的 JavaScript 文件：
<script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
env
这个变量可以用来引用当前环境的变量，它的值由 Webpack 的环境变量传递进来。
例如，在 React 项目中，我们可以通过这个变量引用当前环境的 API 地址：
const apiUrl = process.env.NODE_ENV === 'production' ? 'http://our.api.com' : 'http://localhost:3000';
process
这个变量也可以用来引用环境变量，它是 Node.js 中的一个全局变量。
例如，在 Webpack 中，我们可以使用这个变量来判断当前环境是否是开发环境：
const isDev = process.env.NODE_ENV === 'development';
如何在 template 模板中使用变量
使用 Webpack 变量在 template 模板中非常简单，我们只需要在 template 中使用 <%= ... %> 来引用变量就可以了。
举个例子，假设我们有这个简单的 Vue.js 应用：
// app.js
import Vue from 'vue';
import App from './App.vue';
const app = new Vue({
el: '#app',
render: h => h(App),
});我们可以使用 Webpack 来打包这个应用，并生成一个 HTML 文件，代码如下：
-- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ ---------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -------------------
--------- -------------------
---
--
--这里通过 HtmlWebpackPlugin 插件来生成 HTML 文件，并指定了它的 template 模板。
现在我们可以在 index.html 中使用 Webpack 变量来引入打包后的 JavaScript 文件：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- ----------- ------- ------ ---- --------------- ------- -------- ----------------------------------------- ------------- ------- -------
这里使用了 htmlWebpackPlugin.files.chunks.main.entry 变量来引用打包后的 JavaScript 文件。
运行 Webpack 打包后，就可以在 dist 目录中生成一个 HTML 文件，它的内容就包含了我们打包后的 JavaScript 文件。
总结
通过使用 Webpack 变量，在 template 模板中使用变量非常简单。这可以帮助我们更好地管理 Webpack 打包后的文件，在前端开发中发挥重要作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483d0fa48841e989430ee4e