webpack中plugins

webpack入门学习：
https://segmentfault.com/a/1190000006178770
https://blog.csdn.net/solar_lan/article/details/82751165
1.HtmlWebpackPlugin
这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）
2.Hot Module Replacement
Hot Module Replacement（HMR）也是webpack里很有用的一个插件，它允许你在修改组件代码后，自动刷新实时预览修改后的效果。

优化插件
OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
UglifyJsPlugin：压缩JS代码；
ExtractTextPlugin：分离CSS和JS文件

缓存
缓存
缓存无处不在，使用缓存的最好方法是保证你的文件名和文件内容是匹配的（内容改变，名称相应改变）

webpack可以把一个哈希值添加到打包的文件名中，使用方法如下,添加特殊的字符串混合体（[name], [id] and [hash]）到输出文件名前

去除build文件中的残余文件
添加了hash之后，会导致改变文件内容后重新打包时，文件名不同而内容越来越多，因此这里介绍另外一个很好用的插件clean-webpack-plugin。

webpack开发中怎样解决跨域的问题
webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题
webpack 配置

proxy:  {
      '/api/*': {
        target: 'http://localhost:8888/', // 目标服务器地址
        secure: false, // 目标服务器地址是否是安全协议
        changeOrigin: true, // 是否修改来源, 为true时会让目标服务器以为是webpack-dev-server发出的请求!
        // '/api/login' =>    target + '/login'
        pathRewrite: {'^/api': '/'} // 将/api开头的请求地址, /api 改为 /, 即 /api/xx 改为 /xx
      }
  }

我当前服务为 http://localhost:8080/

 fetch('/api/data').then(res => {
      // http://localhost:8888/data 实际访问地址
      console.log(res)
    })