Webpack 常用的Plugin什么是plugin 🤔️ plugin（插件）是webpack的支柱功能，解决loa

什么是plugin 🤔️

plugin（插件）是webpack的支柱功能，解决loader无法实现的事情。通常用于对现有的架构进行扩展，比如打包优化，文件压缩等等。

常用的一些插件

MiniCssExtractPlugin

没有提取之前css是打包到js里面的，先加载js文件，然后创建css样式，这样会出现闪屏现象用户体验不好，

解决以上问题方案：

将 CSS 提取到单独的文件中，通过link标签加载性能才好，并且支持 CSS 和 SourceMaps 的按需加载。

把style-loader改为MiniCssExtractPlugin.loader

修改前后打包输出的结果 👇

CssMinimizerWebpackPlugin

通过使用 cssnano 优化和压缩 CSS。

HtmlWebpackPlugin

HtmlWebpackPlugin 简化了 HTML 文件的创建,把当前存在的html复制一份到打包文件中

新的文件特点：

结构和原来的一样，
自动引入打包输出的资源

HotModuleReplacementPlugin

模块热替换(HMR)功能会在应用程序运行过程中，替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

保留在完全重新加载页面期间丢失的应用程序状态。

只更新变更内容，以节省宝贵的开发时间。

在源代码中 CSS/JS 产生修改时，会立刻在浏览器中进行更新，这几乎相当于在浏览器 devtools 直接更改样式。

@pmmmwh/react-refresh-webpack-plugin (react中的HMR)

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); 

module:{
    rules:[
       {
         test: /\.(jsx|js)$/,
         exclude: /(node_modules)/,  //排除node_modules
         use: {
           loader: 'babel-loader',
           options: {
             plugins: ['react-refresh/babel'],
            },
         },     
      }
    ]
}