• I met the Plugin

    Loaders are used to convert certain types of modules, while plug-ins can be used to perform a wider range of tasks. These include: packaging optimization, resource management, injecting environment variables.

  • CleanWebpackPlugin

    If no plug-ins are installed if we executebuildThe command must manually delete the resource that was packaged last time. If you do not delete the resource file that was packaged last time, it may be left behind (for example, an image that was packaged last time was deleted this time, it will be left behind as shown below)

    So each time you package, you need to manually delete the files that were packaged last time.

    CleanWebpackPluginCan help us to automatically delete the corresponding file before packaging

    • The installation

      yarn add clean-webpack-plugin -D
    • configuration

    • Pack the result

  • HtmlWebpackPlugin

    If you are going to deploy your project you must have an entry file which isindex.html, but this file is not in the package folder, we can manually add oneindex.html, can also passHtmlWebpackPluginHelp us generate one automaticallyindex.html

    • The installation

      yarn add html-webpack-plugin -D
    • configuration

    • Pack the resultThis file is generated through a template file template file in the source code as shown below:We can customize the template and it will have some syntax in itThe < % % > variableThis is aEJSHow the module is populated with dataPacking result:

  • DefinePlugin

    The global constant that helps us create the configuration at compile time is awebpackBuilt-in plug-in (no separate installation required). When we added the template above we added one at this pointfavicon.icoThe following figure

    Error:The prompt cannot be foundBASE_URLIn this case, you can configure a global constant as shown in the figure below:

  • CopyWebpackPlugin

    Used aboveDefinePluginFixed the issue with the packaging error, but when run, the diagram does not show the following figureThe reason for this is simple. Let’s look at the package firstindex.htmlfileHe is looking for the icon file in the current folder, but the package file does not have the corresponding icon file copied in, this time can be usedCopyWebpackPluginThe plug-in copies all the files in the specified folder.

    • The installation

      yarn add copy-webpack-plugin -D
    • configuration
      • All replicated rules are added topatternsThe value of this parameter corresponds to an array that can be added multiple times
      • Each replication rule contains the following parametersFrom, to, glocOptions
        • from: Assign values from that folder
        • to: copy to that location without setting the default to the package directory
        • glocOptions: Sets some additional options, such asindex.htmlThere is no need to copy shouldHtmlWebpackPluginThe corresponding file has been generated

      The configuration is as follows:At this time, the package is shown in the following figure:Only the icon file was copied, and the other two files were not copied, and then we looked at the results