最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】HtmlWebpackPlugin用的html的ejs模板文件中如何使用条件判断

HTML crifan 6321浏览 0评论

折腾:

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

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

想要实现类似于这样的效果:

    <% if htmlWebpackPlugin.options.isProdEnv %>
    <link rel=”stylesheet” href=”assets/lib/bootstrap/bootstrap.min.css”>
    <% else %>
    <link rel=”stylesheet” href=”http://localhost:4000/assets/lib/bootstrap/bootstrap.min.css”>
    <% endif %>

htmlwebpackplugin ejs template

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

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

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

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

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

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) { %>
  <h2><%= user.name %></h2>
<% } %>

但是好像没有if else

‎ejs.co

此处,参考官网代码:

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

  new HtmlWebpackPlugin({
    template: ‘./src/index.template.ejs’,
    // minify: { collapseWhitespace: true },
    filename: ‘index.html’,
    // inject: true,
    hash: true,
    isProdEnv: isProd
  }),

的情况下,index.template.ejs中写上:

    <% if (htmlWebpackPlugin.options.isProdEnv) { %>
      <link rel=”stylesheet” href=”assets/lib/bootstrap/bootstrap.min.css”>
    <% } %>
    <% if (!htmlWebpackPlugin.options.isProdEnv) { %>
      <link rel=”stylesheet” href=”http://localhost:4000/assets/lib/bootstrap/bootstrap.min.css”>
    <% } %>

是可以在htmlWebpackPlugin.options.isProdEnv为true,生成:

      <link rel=”stylesheet” href=”assets/lib/bootstrap/bootstrap.min.css”>

在:htmlWebpackPlugin.options.isProdEnv为false,生成:

      <link rel=”stylesheet” href=”http://localhost:4000/assets/lib/bootstrap/bootstrap.min.css”>

的。

当然,其实此处,更好的做法是:

直接传入,此处的href中的地址,需要添加的前缀,就可以了。

然后改为:

let wdsListenPort = 4000;
  new HtmlWebpackPlugin({
    template: ‘./src/index.template.ejs’,
    // minify: { collapseWhitespace: true },
    filename: ‘index.html’,
    // inject: true,
    hash: true,
    assetsPrefix: isProd ? ” : `http://localhost:${wdsListenPort}/`
  }),

    <link rel=”stylesheet” href=”<%= htmlWebpackPlugin.options.assetsPrefix %>assets/lib/bootstrap/bootstrap.min.css”>

npm run build,为production时,即可输出:

    <link rel=”stylesheet” href=”assets/lib/bootstrap/bootstrap.min.css”>

【总结】

此处用如下方式,实现了想要的效果:

当是开发环境时,从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({
    template: ‘./src/index.template.ejs’,
    // minify: { collapseWhitespace: true },
    filename: ‘index.html’,
    // inject: true,
    hash: true,
    assetsPrefix: isProd ? ” : `http://localhost:${wdsListenPort}/`
  }),

src/index.template.ejs

    <link rel=”stylesheet” href=”<%= htmlWebpackPlugin.options.assetsPrefix %>assets/lib/bootstrap/bootstrap.min.css”>
    <link rel=”stylesheet” href=”<%= htmlWebpackPlugin.options.assetsPrefix %>assets/lib/font-awesome/css/font-awesome.css”>

通过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地址都是:

    <link rel=”stylesheet” href=”assets/lib/font-awesome/css/font-awesome.css”>

npm run build去开发环境编译,所以编译出来的href地址都是:

<link rel=”stylesheet” href=”http://localhost:4000/assets/lib/font-awesome/css/font-awesome.css”>

转载请注明:在路上 » 【已解决】HtmlWebpackPlugin用的html的ejs模板文件中如何使用条件判断

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.194 seconds, using 22.16MB memory