WebPACKの共通モジュールに、ベースのライブラリ、複数の公開方法は、パッケージのサイズと梱包時間を短縮するために、単独で切り離しを使用しました

。1. HTML-のWebPACK - 外観-pluginのウィジェット

インストールのhtml-のWebPACK - プラグインの外部-

yarn add html-webpack-externals-plugin

設定webpack.config.js（ページあなたが設定したら自動導入）

デモCDNリンク 

const HtmlWebpackExternalsPlugin = require("html-webpack-externals-plugin");
module.exports = {
  plugins: [
    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: "react",
          entry: "https://unpkg.com/react@16/umd/react.production.min.js",
          global: "React"
        },
        {
          module: "react-dom",
          entry:
            "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js",
          global: "ReactDOM"
        }
      ]
    }),
  ],
};

引っ張られたパッケージを比較した後

（旧戸建）

切り離された後、

2.使用のWebPACKは来る  SplitChunksPluginプラグイン  スプリット・チャンク・プラグインを

module.exports = {
 optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /(react|react-dom)/,
          name: "vendors",
          chunks: "all"
        }
      }
    }
  }
};

NPMの実行ビルドをパッケージング

あなたは出て構築されている見ることができます

HTMLテンプレート内の単語の使用を紹介するだけでなく、マルチ入力モードを変更する必要があります

module.exports = {
  entry: {
    index: "./src/index.js" // 这里改成多入口
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name]_[hash:8].js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "index.html"),
      filename: "index.html",
      chunks: ["vendors", "index"] // 这里改成 chunks 引入
    }),
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /(react|react-dom)/,
          name: "vendors",
          chunks: "all"
        }
      }
    }
  },
};

俵

3.パブリックメソッドを繰り返し、まだ複数のエントリを設定する必要があり、引き出された使用します

module.exports = {
  entry: {
    index: "./src/index.js"
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name]_[hash:8].js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "index.html"),
      filename: "index.html",
      chunks: ["commons", "index"]
    }),
  ],
  optimization: {
    splitChunks: {
      minSize: 0,
      cacheGroups: {
        commons: {
          name: "commons",
          chunks: "all",
          minChunks: 1 // 某个方法至少引用了两次，才会单独抽离
        }
      }
    }
  },
};