Webpack Auto Find Usable Port

English | 简体中文

Overview

A library for help webpack devserver find usable port when has port conflict.

Install

npm install webpack-auto-find-port -D

API

param	description	type	required
config	provider the webpack devserver config.	object	yes
logger	return the port with callback	function	no

Usage

const webpackAutoFindPort = require('webpack-auto-find-port')
// here is your webpack devServer config
// ...code

module.exports = webpackAutoFindPort({
  config: webpackDevConfig,
  logger: port => {}
})

Example

You can run Example demo

cd example

npm install

# Now you can sperate two terminal in your local
# Run below command in each terminal

npm run dev

Detail config.

const path = require('path')
const chalk = require('chalk')
const merge = require('webpack-merge')
const webpack = require('webpack')
const webpackBaseConfig = require('./webpack.base.config')
// here, we import our plugin
const webpackAutoFindPort = require('webpack-auto-find-port')

const webpackDevConfig = merge(webpackBaseConfig, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.resolve(`${process.cwd()}`, '../dist/index.html'),
    publicPath: '/',
    compress: true,
    noInfo: true,
    disableHostCheck: true,
    open: true,
    inline: true,
    port: 8080
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
})

// here, export our config
module.exports = webpackAutoFindPort({
  config: webpackDevConfig,
  logger: port => {
    console.log('P is Runing at', port)
  }
})

Author

👤 biyuqiwan@163.com

• Github: @BiYuqi

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

📝 License

Copyright © 2019 biyuqiwan@163.com.
This project is MIT licensed.