Webpackプラグインリテラシーシリーズ（1）AddAssetHtmlPluginおよびwebpack.ProvidePlugin

AddAssetHtmlPlugin

このプラグインによって呼び出されるnpmパッケージの名前はadd-asset-html-webpack-pluginよくhtml-webpack-tags-plugin比較されます。

効果は実際には同じです。特定のスクリプトへの参照をページと一緒にパッケージ化してから挿入したい場合は、グローバル変数（Windowの下で公開）の効果を実現します。

new AddAssetHtmlPlugin([
    {
    
    filepath: path.resolve(__dirname, '../src/axios.min.js'),
          outputPath: 'smc_public/dll/',
          publicPath: path.join(publicPath, 'smc_public/dll'),
          includeSourcemap: true}
  ])

違いは
html-webpack-tags-plugin、ファイルはコピーされませんが、add-asset-html-webpack-pluginファイルはdistディレクトリ（もちろん、構成可能なdistディレクトリ）にコピーされ、ラベルが追加されることです。

つまり、add-asset-html-webpack-pluginは、html-webpack-tags-pluginにcopy-webpack-pluginを追加したものと同等です。

plugins: [
  new CopyWebpackPlugin([
    {
    
     from: 'node_modules/bootstrap/dist/css', to: 'css/'},
    {
    
     from: 'node_modules/bootstrap/dist/fonts', to: 'fonts/'}
  ]),
  new HtmlWebpackTagsPlugin({
    
    
    links: ['css/bootstrap.min.css', 'css/bootstrap-theme.min.css']
  })
]

webpack.ProvidePlugin

上記のアプローチには問題があります。上記のプラグインは、スクリプトタグにスクリプトを挿入するだけです。基本的には、ウィンドウオブジェクトの下にマウントされます。公開したいグローバル変数がウィンドウオブジェクトの下に見つからないようにするには（セキュリティの問題）、どうすればよいですか？ここではそれを使用しwebpack.ProvidePluginます。

  // 内置模块提供全局变量
   new webpack.ProvidePlugin({
    
    
        csm:path.resolve(__dirname, '../src/app.bundle.js')
    }),

この方法で公開された変数は、プロジェクトで渡すimportか、require直接使用できます。そして、オブジェクトは公開されませんwindow、データオブジェクトを非表示にする効果。