折腾:
【已解决】给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
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
此处,参考官网代码:
在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”> |