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