2022年开发者都在用的 Webpack 插件，你用上了吗

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

Webpack Dashboard

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

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

代码语言：javascript复制

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

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

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

代码语言：javascript复制

//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。

代码语言：javascript复制

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

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