2022 年最流行的 Webpack 插件，你用上了吗

Posted 2022-04-20 前端修罗场

如果我们有合适的工具，开发就会变得更容易。在这篇文章中，我将讨论一些流行的webpack插件。

Webpack Dashboard

以上输出很难阅读和理解。此外，信息没有很好地格式化和呈现。

这里webpack仪表盘的图片有一个更好的视觉输出。通过在cmd中键入命令来安装它。

npm install --save-dev webpack-dashboard
# or
$ yarn add --dev webpack-dashboard

注:webpack-dashboard@^3.0.0需要node8+或以上。以前的版本只支持node6。

现在，我们需要在·webpack.config.js·中导入这个插件，并添加到plugins数组中。

//webpack.config.js

const path = require('path');
const webpackDashboard = require('webpack-dashboard/plugin');
module.exports = 
   entry: './src/index.js',
   output: 
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   ,
   devServer: 
      port: 8080
   ,
   module: 
      rules: [
         
            test: /\\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         ,
         
            test: /\\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        
      ]
   ,
   plugins:[
       new webpackDashboard() // add
   ]

还需要在package.json中修改你的脚本。只需要在每个脚本之前附加webpack-dashboard。

"scripts": 
    "start": "webpack-dashboard -- webpack serve --mode development --open --hot",
    "build": "webpack-dashboard -- webpack --mode production"
  

运行应用程序，您将看到一个非常棒的构建过程输出。😍

Terser Webpack Plugin

terser webpack插件用于压缩你的javascript包的大小以供生产使用。这个插件还支持ES6+JavaScript语法。

注意:Terser webpack插件默认是webpack 5自带的。

使用下面的命令安装这个插件:

npm install --save-dev terser-webpack-plugin

然后导入并添加这个插件到你的webpack.config.js中:

//webpack.config.js

const path = require('path');
const webpackDashboard = require('webpack-dashboard/plugin');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = 
   entry: './src/index.js',
   output: 
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   ,
   optimization: 
      minimize: true,
      minimizer: [new TerserPlugin()],
    ,
   devServer: 
      port: 8080
   ,
   module: 
      rules: [
         
            test: /\\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         ,
         
            test: /\\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        
      ]
   ,
   plugins:[
       new webpackDashboard()
   ]

Optimize CSS Assets Webpack Plugin

这个插件将搜索你项目中的所有CSS文件，并优化/压缩CSS。

npm install --save-dev optimize-css-assets-webpack-plugin mini-css-extract-plugin css-loader

webpack.config.js.:

//webpack.config.js

const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
const webpackDashboard = require('webpack-dashboard/plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = 
   entry: './src/index.js',
   output: 
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   ,
   optimization: 
      minimize: true,
      minimizer: [new TerserPlugin(), new MiniCssExtractPlugin()],
    ,
   devServer: 
      port: 8080
   ,
   module: 
      rules: [
         
            test: /\\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         ,
         
            test: /\\.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
         , 
      ]
   ,
   plugins:[
       new webpackDashboard(),
       new MiniCssExtractPlugin(),
       new OptimizeCssAssetsPlugin(
         assetNameRegExp: /\\.optimize\\.css$/g,
         cssProcessor: require('cssnano'),
         cssProcessorPluginOptions: 
           preset: ['default',  discardComments:  removeAll: true  ],
         ,
         canPrint: true
       )
   ]

html Webpack Plugin

HTML webpack插件，用于生成HTML文件，用JavaScript代码注入脚本标签。这个插件用于开发和生产构建。

使用以下方法安装此插件:

npm install --save-dev html-webpack-plugin

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const webpackDashboard = require('webpack-dashboard/plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = 
   entry: './src/index.js',
   output: 
      path: path.join(__dirname, '/dist'),
      filename: 'bundle.js'
   ,
   optimization: 
      minimize: true,
      minimizer: [new TerserPlugin(), new MiniCssExtractPlugin()],
    ,
   devServer: 
      port: 8080
   ,
   module: 
      rules: [
         
            test: /\\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
         ,
       
         test: /\\.css$/i,
         use: [MiniCssExtractPlugin.loader, 'css-loader'],
     , 
      ]
   ,
   plugins:[
       new HtmlWebpackPlugin(
         Object.assign(
           ,
           
             inject: true,
             template: path.join(__dirname,'/src/index.html')
           ,

           // Only for production
           process.env.NODE_ENV === "production" ? 
             minify: 
               removeComments: true,
               collapseWhitespace: true,
               removeRedundantAttributes: true,
               useShortDoctype: true,
               removeEmptyAttributes: true,
               removeStyleLinkTypeAttributes: true,
               keepClosingSlash: true,
               minifyJS: true,
               minifyCSS: true,
               minifyURLs: true
             
            : undefined
         )
       ),
       new webpackDashboard(),
       new MiniCssExtractPlugin(),
       new OptimizeCssAssetsPlugin(
         assetNameRegExp: /\\.optimize\\.css$/g,
         cssProcessor: require('cssnano'),
         cssProcessorPluginOptions: 
           preset: ['default',  discardComments:  removeAll: true  ],
         ,
         canPrint: true
       )
   ]

Clean Webpack Plugin

Clean webpack插件用于清理/删除你的构建文件夹。它还将在每次成功重建后删除所有未使用的webpack assets。

这个插件将帮助减少包的大小，删除不需要的文件和assets文件。

使用以下方法安装此插件:

npm install --save-dev clean-webpack-plugin

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const webpackDashboard = require("webpack-dashboard/plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const  CleanWebpackPlugin  = require("clean-webpack-plugin");

module.exports = 
  entry: "./src/index.js",
  output: 
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  ,
  optimization: 
    minimize: true,
    minimizer: [new TerserPlugin(), new MiniCssExtractPlugin()],
  ,
  devServer: 
    port: 8080,
  ,
  module: 
    rules: [
      
        test: /\\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      ,
      
        test: /\\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      ,
    ],
  ,
  plugins: [
    new HtmlWebpackPlugin(
      Object.assign(
        ,
        
          inject: true,
          template: path.join(__dirname, "/src/index.html"),
        ,

        // Only for production
        process.env.NODE_ENV === "production"
          ? 
              minify: 
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
              ,
            
          : undefined
      )
    ),
    new webpackDashboard(),
    new MiniCssExtractPlugin(),
    new OptimizeCssAssetsPlugin(
      assetNameRegExp: /\\.optimize\\.css$/g,
      cssProcessor: require("cssnano"),
      cssProcessorPluginOptions: 
        preset: ["default",  discardComments:  removeAll: true  ],
      ,
      canPrint: true,
    ),
    new CleanWebpackPlugin(
      // Use !negative patterns to exclude files
      // default: []
      cleanAfterEveryBuildPatterns: ["static*.*", "!static1.js"],

      // Write Logs to Console
      // (Always enabled when dry is true)
      // default: false
      verbose: true,
    ),
  ],
;

你可以看到，在运行npm run build之后，dist文件夹下的所有文件都会被删除，之后只会发出必需的文件，temp.js也会被删除，因为它在任何文件中都没有引用。

感谢阅读这篇博客文章。如果你在使用webpack配置这些插件时遇到任何问题，请随时在评论框中发表评论。

如果你觉得这篇文章有用，请与你的朋友和同事分享!❤️