不同的打包环境下，首页内容可能会有所不同。我们可以通过插件的方式进行定制，插件配置如下:
- 发布模式 config.plugin('html').tap
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
- 开发模式
config.plugin('html').tap(args => {
args[0].isProd = false
return args
})
- 在 public/index.html 首页中，可以根据 isProd 的值，来决定如何渲染页面结构：
<!– 按需渲染页面的标题 -->
<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>
<!– 按需加载外部的 CDN 资源 -->
<% if(htmlWebpackPlugin.options.isProd) { %>
<!– 通过 externals 加载的外部 CDN 资源 -->
<% } %>
