开发者社区彭世瑜的博客文章正文

HtmlWebpackPlugin（html-webpack-plugin）传入自定义参数到模板

2022-09-14 199

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>

码农技术君

html的七十二变

1月前

前端开发

在Webpack配置文件中，如何配置loader以处理其他类型的文件，如CSS或图片

在Webpack配置文件中，通过设置`module.rules`来配置loader处理不同类型的文件。例如，使用`css-loader`和`style-loader`处理CSS文件，使用`file-loader`或`url-loader`处理图片等资源文件。配置示例：在`rules`数组中添加对应规则，指定`test`匹配文件类型，`use`指定使用的loader。

html的七十二变

57 6 6

卡尔特斯

7月前

前端开发 JavaScript 中间件

React Proxy 详细流程与配置方式（webpack、setupProxy.js、package.json）

卡尔特斯

754 1 1

卡尔特斯

7月前

前端开发 JavaScript 中间件

React Proxy 详细流程与配置方式（webpack、setupProxy.js、package.json）