Webpack配置-经常使用Plugin

• 初识Plugin

  loader 用于转换某些类型的模块，而插件则能够用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

• CleanWebpackPlugin

  若是没有安装任何插件的状况下若是咱们执行 build指令必须手动删除上一次打包的资源，若是不删除上一次打包的资源文件有可能被遗留下来（好比上一次有一张图片，此次打包这张图片被删除了，那么就会被遗留以下图：）
  因此每次打包都须要手动删除一下上一次打包的文件。
  CleanWebpackPlugin能够帮助咱们打包以前自动删除对应的文件
  • 安装
    yarn add clean-webpack-plugin -D
  • 配置
    
  • 打包结果

• HtmlWebpackPlugin

  若是要对项目进行部署的话必定要有一个入口文件也就是 index.html,可是此时打包文件夹中是没有这个文件的，咱们能够手动添加一个 index.html，也能够经过 HtmlWebpackPlugin帮咱们自动生成一个index.html
  • 安装
    yarn add html-webpack-plugin -D
  • 配置
    
  • 打包结果 该文件是经过一个模板生成的文件模板文件在源码中以下图： 咱们能够自定义模板其中会有一些语法<% 变量 %>这个是EJS模块填充数据的方式 打包结果：

• DefinePlugin

  帮助咱们在编译时建立配置的全局常量，是一个webpack内置的插件（不须要单独安装）。 如上添加模板的时候此时咱们添加一个 favicon.ico以下图
  此时打包会报错： 提示找不到BASE_URL的定义，此时就能够配置一个全局常量以下图:

• CopyWebpackPlugin

  上文中使用 DefinePlugin解决了打包报错的问题，可是运行起来发现图表并无显示以下图 缘由很简单，先看打包后的 index.html文件 他是在当前文件夹下找图标文件，可是打包的文件中并无吧对应的图标文件复制进来，此时可使用 CopyWebpackPlugin插件将制定文件夹的文件所有复制进来。
  • 安装
    yarn add copy-webpack-plugin -D
  • 配置
    • 全部复制的规则添加到 patterns中，该参数的值对应的是个数组能够添加多条
    • 每一个复制规则又包含以下参数 from、to、glocOptions
      • from:从那个文件夹开始赋值
      • to: 复制到那个位置，不设置默认复制到打包目录下
      • glocOptions：设置一些额外的选项，好比 index.html不须要再复制应为 HtmlWebpackPlugin已经生成了对应的文件了
    具体配置以下： 此时在打包以下图： 发现仅仅复制了图标文件其余两个文件没有复制过来，而后再看运行结果