Webpack 插件扫盲系列（一） AddAssetHtmlPlugin和webpack.ProvidePlugin

AddAssetHtmlPlugin

这个插件调用的npm包名是 add-asset-html-webpack-plugin,经常和html-webpack-tags-plugin做对比。

作用其实二者相同，当我们想在跟页面打包后，插入我们特定script的引用，来达到全局变量的效果（暴露在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

上述方式有一个问题。上述插件只是在script标签中插入脚本。本质上是挂载在window对象下。当我们想要暴露的全局变量不想在window对象下被找到（安全问题）时，应该如何去做？这里我们就用到了webpack.ProvidePlugin。

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

这样暴露的变量可以在项目中不通过import或者require就可以直接使用。并且该对象没有暴露在window下，达到隐藏数据对象的效果。