webpackで<script>タグでロードしたライブラリをbundleされたJSから外したい

webpackのconfigには externals というものがある(ドキュメント)。このexternalsで定義したライブラリは、importで参照していてもwebpackでビルドして生成される成果物(bundle.js)には含まれなくなるというもの。

自分のユースケース

• もともとReactを使っていないプロジェクトで一部のページだけでReactを使っていきたい
• 全ページでReactを使うわけではないので、bundle.js には含めたくない(サイズ削減)
• Reactが必要なページのみHTML上の <script> タグでロード

webpack.config.js

externalsでreactを除外するよ、ということを定義すれば bundle.js には含まれないようになる。webpackの設定ファイルはこんな感じ。

const config = {
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
  },
  ...
};

module.exports = config;