webpack-dashboard

webpack-dashboard是用于改善开发人员使用webpack时控制台用户体验的一款工具。它摒弃了webpack(尤其是使用dev server时)在命令行内诸多杂乱的信息结构,为webpack在命令行上构建了一个一目了然的仪表盘(dashboard),其中包括构建过程和状态、日志以及涉及的模块列表。有了它,你就可以更加优雅的使用webpack来构建你的代码。

1.1 它是什么

简单地说,webpack-dashboard就是把原先你使用webpack时(特别是使用webpack dev server时)命令行控制台打印的日志:

Creating an optimized production build...
Compiled with warnings.

./src/App.js
 Line 10:  'One' is assigned a value but never used  no-unused-vars
 Line 16:  'Two' is assigned a value but never used  no-unused-vars

 Search for the keywords to learn more about each warning.
 To ignore, add // eslint-disable-next-line to the line before.

 File sizes after gzip:

 97.39 KB  build/static/js/main.4348a7e3.js
 69.13 KB  build/static/js/0.f84fa404.chunk.js
 39.43 KB  build/static/js/2.81fe7f28.chunk.js
 39.42 KB  build/static/js/1.a2c322a6.chunk.js

 The project was built assuming it is hosted at the server root.
 To override this, specify the homepage in your package.json.
 For example, add this to build it for GitHub Pages:

转换成了这样:
5.png

1.2 如何使用

其实安装和使用webpack-dashboard的过程非常简单,首先使用npm本地安装它,到你基于webpack的前端项目上:

npm install webpack-dashboard --save-dev

如果你利用webpack-dev-server启动了一个server,而不是express的话,可以直接在webpack.config.js里面初始化dashboard。

首先,导入dashboard和其对应的插件,并创建一个dashboard的实例:

const Dashboard = require('webpack-dashboard');
const DashboardPlugin = require('webpack-dashboard/plugin');
const dashboard = new Dashboard();

然后,在对应的plugins里面添加DashboardPlugin:

plugins: [
   new DashboardPlugin(dashboard.setData)
]

最后,你需要让dev server在静默的状态中启动(主要是为了去掉多余的日志),要实现这一点,你可以像官方的做法那样,在WebpackDevServer的构造函数里添加 quiet: true。

new WebpackDevServer(
   Webpack(settings),
   {
     publicPath: settings.output.publicPath,
     hot: true,
     quiet: true, // lets WebpackDashboard do its thing
     historyApiFallback: true,
   }
).listen

当然,你也可以在npm的script里面启动dev server时添加quiet选项(我在尝试的时候选择这种简单的方式)。

"scripts": {
   "start": "webpack-dev-server --quiet"
},

progress-bar-webpack-plugin 打包进度显示

安装

cnpm i -D progress-bar-webpack-plugin

使用

var ProgressBarPlugin = require('progress-bar-webpack-plugin');
plugins: [
   new ProgressBarPlugin()
]

HappyPack

我们需要Webpack 能同一时间处理多个任务,发挥多核 CPU 电脑的威力,HappyPack 就能让 Webpack 做到这点,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。

由于 JavaScript 是单线程模型,要想发挥多核 CPU 的能力,只能通过多进程去实现,而无法通过多线程实现。
提示:由于HappyPack 对file-loader、url-loader 支持的不友好,所以不建议对该loader使用。
安装 HappyPack

cnpm i -D happypack

修改你的webpack.config.js 文件

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        //把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
        loader: 'happypack/loader?id=happyBabel',
        //排除node_modules 目录下的文件
        exclude: /node_modules/
      },
   ]
  },
  plugins: [
      new HappyPack({
         //用id来标识 happypack处理那里类文件
         id: 'happyBabel',
         //如何处理  用法和loader 的配置一样
         loaders: [{
            loader: 'babel-loader?cacheDirectory=true',
         }],
        //共享进程池
        threadPool: happyThreadPool,
         //允许 HappyPack 输出日志
        verbose: true,
   })
  ]
 }
  • 在 Loader 配置中,所有文件的处理都交给了 happypack/loader 去处理,使用紧跟其后的 querystring ?id=babel 去告诉 happypack/loader 去选择哪个 HappyPack 实例去处理文件。
  • 在 Plugin 配置中,新增了两个 HappyPack 实例分别用于告诉 happypack/loader 去如何处理 .js 和 .css 文件。选项中的 id 属性的值和上面 querystring 中的 ?id=babel 相对应,选项中的 loaders 属性和 Loader 配置中一样。

HappyPack 参数

  • id: String 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件.
  • loaders: Array 用法和 webpack Loader 配置中一样.
  • threads: Number 代表开启几个子进程去处理这一类型的文件,默认是3个,类型必须是整数。
  • verbose: Boolean 是否允许 HappyPack 输出日志,默认是 true。
  • threadPool: HappyThreadPool 代表共享进程池,即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务,以防止资源占用过多。
  • verboseWhenProfiling: Boolean 开启webpack --profile ,仍然希望HappyPack产生输出。
  • debug: Boolean 启用debug 用于故障排查。默认 false。