Webpackでproduction用のコードをエントリーポイントに差し込む

webpack

ふとVue.js使ってみようと思い立って調べてみると、
vuejs/vue-cli という、Vue.js の土台をサクッと作ってくれる便利ツールがあるらしいということでwebpackを入れて触ってみたのですが、Google Tag Managerのタグ（or Google Analyticsのタグ）の差し込み方が分からなく試行錯誤してしまいました。
　

以下本題（vue-cli, Vue.js は関係ないです）

どうやら、webpackを使ってエントリーポイントであるindex.htmlのbodyの中身をApp.vueなどで置き換えているようです。 ここでindex.htmlにproduction用のコードを埋め込む方法が分からず少しはまっていた。

# コード構成抜粋
.
├── index.html    # <- こいつにproduction時のみ埋め込みたい。でもこいつはhtml。
└── src
     ├── App.vue
     ├── assets
     ├── components
     ├── main.js
     └── router

解決方法

Conditional codes in html template · Issue #47 · jantimon/html-webpack-plugin
で記載されているejsのコードがindex.htmlに書けるので、GTMのコード突っ込むには以下のようにすれば良いです。
　

<!DOCTYPE html>
<html>
  <head>
    <% if (process.env.NODE_ENV === 'production') { %>
      <!-- Google Tag Manager -->
      <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
      <!-- End Google Tag Manager -->
    <% } %>
    <meta charset="utf-8">
    <title>vue-js example</title>
  </head>
  <body>
    <% if (process.env.NODE_ENV === 'production') { %>
      <!-- Google Tag Manager (noscript) -->
      <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
      <!-- End Google Tag Manager (noscript) -->
    <% } %>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

　

別解

Webpack側でなんとかする。
当初分からんなくて、これでやっていました。
HtmlWebpackPlugin というので index.html に差し込むかどうか見たいな設定があるので、ここのtemplateをproduction用に変更して対応。

// build/webpack.prod.conf.js

    new HtmlWebpackPlugin({
      filename: process.env.NODE_ENV === 'testing'
        ? 'index.html'
        : config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),