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地址都是：

相關標籤/搜索