webpackでビルドされるJSファイルにDeinePluginを使えば変数を注入出来る模様

index.js

/// msgはwebpackから注入する
console.log(msg);

まぁ単純な例なんで(ry

webpack.config.babel.js

import webpack from "webpack";

module.exports = {
  entry: [
    "./index.js"
  ],
  output: {
    filename: "app.js"
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      msg: JSON.stringify("hoge")
    })
  ]
}

JSON.stringifyをする場合

console.log("hoge");

と出力される

JSON.stringifyをしない場合

console.log(hoge);

と出力される

よって文字列等を注入する場合にはJSON.stringifyをしないといけない模様

ドキュメント: https://webpack.js.org/plugins/define-plugin/

余談

webpack側で注入される変数等の名前にWEBPACKとかのprefixをつけておくと分かりやすいのかな(実際どうかは知らんけど)