webpack-port-collector

简体中文 | English

这是一个 webpack 插件，它收集电脑上使用webpack启动的项目。以下是一些会使用到的场景：

1. 可以在cli项目中监控已启动的项目，方便启动、暂停或重启。
2. 微前端场景下，在本机调试众多子应用时，可以使用这个插件进行统一管理。
3. 如果你正在调试很多原子组件，并且组件分散在不同的项目中，可以使用这个插件进行统一管理。
4. 欢迎在issues中提出更多场景，让插件更加通用

安装

npm i --save-dev webpack-port-collector

yarn add --dev webpack-port-collector

使用

每个子项目的webpack.config.js

const WebpackPortCollector = require('webpack-port-collector')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
     new WebpackPortCollector({
        projectName:'webpack-demo',
        filename: "localEntry.js"
     })
  ]
}

参数

属性	是否必填	描述
projectName	false	已启动的项目名称,默认为package.json中的名称

启动项目后，你会看到这个插件的日志。暴露的两个重要端口是 websocket 端口和 http 端口。用法如下：

1. 下例中的端口是插件启动时输出
2. 您可以通过http端口获取本地启动的所有webpack项目的列表。
   
3. 通过监听websocket可以实时获取本地启动的项目列表，当项目启动或终止时，websocket会发送消息。