build-html-webpack-plugin
简易版的html-webpack-plugin
功能说明
-
支持自动替换bundle的实际访问地址
-
支持搭配
webpack-dev-server
使用, 并可选择性开启html监听自动刷新
使用说明
// webpack.config.jsvar BuildHtmlWebpackPlugin = moduleexports = // ... plugins: tplPath: './outTpl' outPath: './' ;
参数说明:
options; // options.tplPath 模板的目录(目录下所有html文件批量处理), 可以是绝对路径, 可以是相对于执行webpack命令的相对路径(process.cwd())// option.outPath html文件的输出目录, 可以是绝对路径, 可以是相对于执行webpack命令的相对路径(process.cwd())
模板示例:
Hello world <!-- nunjucks 模板变量语法 --> <!-- module["bundleName.js"] or module["bundleNamename.css"] 替换实际bundle的实际访问地址 --> <!-- nunjucks 模板变量语法 --> <!-- module["bundleName.js"] or module["bundleNamename.css"] 替换实际bundle的实际访问地址 -->
搭配webpack-dev-server使用
希望开启修改html模板的时候启用liveReload吗?
-
webpack.config.js 按上述配置使用插件
-
webpack.config.js中的entry, 添加插件的client
var config = ;configentryapp;configentryapp;var compiler = ;var server = compiler ...;compiler_server = server; // 一定要加这一句server; -
cli添加环境变量
WATCH=true
$ WATCH=true your-server # can be webpack-dev-server or your server-cli