HtmlWebpackPlugin(html-webpack-plugin)传入自定义参数到模板

简介: HtmlWebpackPlugin(html-webpack-plugin)传入自定义参数到模板

文档:https://github.com/jantimon/html-webpack-plugin


示例:将版本号传入到html模板文件中


配置文件 webpack.config.js


const HtmlWebpackPlugin = require('html-webpack-plugin')
const version = require('./package.json').version;
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.ejs'
      templateParameters: {
        'version': version
      },
    })
  ]
};

package.json

{
  "version": "2.0.1"
}

模板文件

<title><%= version %></title>

打包结果

<title>2.0.1</title>
相关文章
|
7月前
|
移动开发 弹性计算 前端开发
Html5和Webpack3:Webpack5的常见用法
本实验将介绍Webpack5的打包工具的一些常见用法
66 2
|
7月前
|
JavaScript 前端开发
vue+webpack项目动态设置页面title的方法
vue+webpack项目动态设置页面title的方法
|
前端开发
webpack基础篇(五):资源解析--解析 CSS
webpack基础篇(五):资源解析--解析 CSS
64 0
webpack基础篇(五):资源解析--解析 CSS
webpack基础篇(八):资源解析--解析字体
webpack基础篇(八):资源解析--解析字体
82 0
webpack基础篇(八):资源解析--解析字体
|
JavaScript
webpack基础篇(九):资源解析--使用url-loader
webpack基础篇(九):资源解析--使用url-loader
88 0
webpack基础篇(九):资源解析--使用url-loader
webpack基础篇(七):资源解析--解析图片
webpack基础篇(七):资源解析--解析图片
85 0
webpack基础篇(七):资源解析--解析图片
|
缓存 JavaScript 前端开发
Webpack 项目中 html-webpack-plugin 和 public 目录的关系
这几天一直在研究 Webpack 这些打包工具链,在研究项目启动的过程中,初步认识到平时开发时是通过 Webpack-dev-server 调用 Webpack 的打包能力结合静态资源服务器能力开发的
|
前端开发 JavaScript 开发者
html-webpack-plugin 的两个基本作用| 学习笔记
快速学习 html-webpack-plugin 的两个基本作用
250 0
|
存储 前端开发 JavaScript
配置 html-webpack-plugin 插件|学习笔记
快速学习配置 html-webpack-plugin 插件
154 0
配置 html-webpack-plugin 插件|学习笔记
|
Web App开发 JSON JavaScript
配置 webpack 以省略.jsx 后缀名|学习笔记
快速学习配置 webpack 以省略.jsx 后缀名
210 0
配置 webpack 以省略.jsx 后缀名|学习笔记