webpack4 常用插件

• html-webpack-plugin
  自动生成html文件

   let HtmlWebpackPlugin = require('html-webpack-plugin');
   new HtmlWebpackPlugin({
      template: './src/index.html',    // 模板文件，不局限html后缀
      filename: 'index.html',  // 生成的html命名
      hash: true, //  会在打包好的bundle.js后加hash串
      chunks: [name]   // 指定输出页面需要引入的chunks
      // removeComments 移除HTML中的注释
      // collapseWhitespace 删除空白符与换行符，整个文件会压成一行
      // inlineSource 插入到html的css,js文件都要内联，既不是以link，script引入
      // inject 是否能注入内容到输入的页面去
    })
  

• css - 提取

  • mini-css-extract-plugin
    这个插件将css按模块化解压到单独的文件中，为每个包含css的js文件创键一个css文件。
    🎈: style-loader 是将css文件以行内样式style的标签写入打包后的html页面，mini-css-extract-plugin是直接link方式引入进去

  • extract-text-webpack-plugin
    根据创键实例、或者配置多个入口chunk来的，比如配置了一个入口文件，最终所有的css都会提取在一个样式文件中；如果n个入口（即创键了n个实例），则会生成多个css文件

• optimize-css-assets-webpack-plugin
  压缩css,优化css结构，利于网页加载和渲染

• uglifyjs-webpack-plugin
  js 代码压缩

• clean-webpack-plugin
  编译输出文件前，删除旧文件，当利用文件hash值输出时，可以利用改插件删除原有文件（即每次打包时清空指定文件夹）

  const CleanWebpackPlugin = require('clean-webpack-plugin')
  new CleanWebpackPlugin (['dist']) // 清空dist文件夹
  

• copy-webpack-plugin
  拷贝单个文件或多个文件或整个目录,比如static文件夹拷贝

• happypack
  提升构建速度
  由于运行在Node.js之上的webpack是单线程的，所以webpack需要处理的事情（构建过程中，需要使用loader对js,css,图片字体等做转换操作）要一件一件的做，我们需要webpack能同一时间处理多个任务，发挥多核CPU电脑的威力，HappyPack就能做到，把任务分解多个子进程去并发的执行，子进程处理完再把结果发给主进程。（由于JavaScript是单线程模型，只能多进程实现，无法多线程）
  对各种loader的兼容列表
  🎈补充： 由于对mini-css-extract-plugin,url-loader,file-loader的支持度的问题，所以，不建议使用HappyPack。

• webpack-dev-server 自动打包/热重载
  webpack-dev-server 自动打包/热重载

📢ps: 插件是一个类 所以命名的时候尽量都用大写开头

• purifycss-webpack
  打包编译时，可剔除页面和js中未被使用的css，这样在使用第三方的类库时，只加载被使用的类，大大减小css的体积

• cache-loader
  持久化缓存
  虽然你能在webpack的配置里找到n种缓存设置，但我发现cache-loader可以替代其它选项，它会在你的项目中创建一个 .cache-loader的文件夹，里面存放缓存文件，因为是直接写入硬盘，所以第一次打包的时候会多消耗几秒