HtmlWebpackPlugin用的html的ejs模板文件中如何使用条件判断

时间 2019-12-07

标签 htmlwebpackplugin 用的 html ejs 模板文件如何使用条件判断栏目 HTML 繁體版

原文原文链接

折腾：javascript

【已解决】给react-hot-boilerplate中的index.html换成用HtmlWebpackPlugin自动生成htmlcss

期间，已经有了思路了，可是不知道如何在ejs的html中写条件判断html

想要实现相似于这样的效果：java

<% if htmlWebpackPlugin.options.isProdEnv %>

<% else %>

<% endif %>

htmlwebpackplugin ejs templatereact

html-webpack-plugin/default_index.ejs at master · jantimon/html-webpack-pluginwebpack

is it possible for html-webpack-plugin to output an ejs file? · Issue #551 · jantimon/html-webpack-plugingit

Use html-webpack-plugin with an EJS file or stop webpack from evaluating variables · Issue #664 · jantimon/html-webpack-plugingithub

nesting templates using ejs · Issue #443 · jantimon/html-webpack-pluginweb

javascript – EJS Template for webpack plugin ‘html-webpack-plugin’ – Stack Overflownpm

webpack html (ejs) include other templates – Stack Overflow

没有找到要的。

参考：

webpack – Use HTMLWebpackPlugin with an EJS file – Stack Overflow

却是能够考虑，根据市dev仍是prod去传入的参数，就是link的href添加的前缀

也是能够的。

tracker1/ejs-render-loader: EJS loader for webpack (without frontend dependencies)

mde/ejs: Embedded JavaScript templates — http://ejs.co

支持if：

<% if (user) { %>

<% } %>

可是好像没有if else

‎ejs.co

此处，参考官网代码：

在webpack.config.js中添加了配置：

new HtmlWebpackPlugin({

// minify: { collapseWhitespace: true },

filename: ‘index.html’,

// inject: true,

hash: true,

isProdEnv: isProd

}),

的状况下，index.template.ejs中写上：

<% if (htmlWebpackPlugin.options.isProdEnv) { %>

<% } %>

<% if (!htmlWebpackPlugin.options.isProdEnv) { %>

<% } %>

是能够在htmlWebpackPlugin.options.isProdEnv为true，生成：

在：htmlWebpackPlugin.options.isProdEnv为false，生成：

的。

固然，其实此处，更好的作法是：

直接传入，此处的href中的地址，须要添加的前缀，就能够了。

而后改成：

let wdsListenPort = 4000;

new HtmlWebpackPlugin({

// minify: { collapseWhitespace: true },

filename: ‘index.html’,

// inject: true,

hash: true,

assetsPrefix: isProd ? ” : `http://localhost:${wdsListenPort}/`

}),

和

npm run build，为production时，便可输出：

【总结】

此处用以下方式，实现了想要的效果：

当是开发环境时，从ejs模板生成的html中href的css，js都是：http://localhost:4000/assetsxxx的地址，

当是生产环境时，从ejs模板生成的html中href的css，js都是：assets/xxx的地址，

webpack.config.js

var HtmlWebpackPlugin = require(‘html-webpack-plugin’);

let isProd = (process.env.NODE_ENV === ‘production’);

let wdsListenPort = 4000;

new HtmlWebpackPlugin({

// minify: { collapseWhitespace: true },

filename: ‘index.html’,

// inject: true,

hash: true,

assetsPrefix: isProd ? ” : `http://localhost:${wdsListenPort}/`

}),

src/index.template.ejs

…

经过package.json配置了：

“scripts”: {

“dev”: “cross-env NODE_ENV=development webpack-dev-server –progress –colors –hot –inline”,

“lint”: “eslint src”,

“clean”: “rm -rf build/ build.zip”,

“package”: “zip -r build.zip build/”,

“prebuild”: “npm run clean”,

“build”: “cross-env NODE_ENV=production webpack -p –progress –colors”,

“postbuild”: “npm run package”

而后就能够：

npm run build去生产环境编译，因此编译出来的href地址都是：

npm run build去开发环境编译，因此编译出来的href地址都是：