折騰：
【已解決】給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”> |