How can I stop webpack-dev-server

Question

Does anyone know how to stop webpack-dev-server? I have tried to use Ctrl+C and Ctrl+Z, it's doesn't work, no matter I press it once or twice. Additionally, even though I close the command line interface, It still works. And even if I change the server port, the previous server port still works. So I have to change the server port everytime when I close the CLI or want to change some parameters in webpack.config.js.

Here is my webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
	entry: {
		main: './src/main.js'
	},
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js',
	},
	devtool: false,
	module: {
		rules: [{
			test: /\.css$/,
			use: ExtractTextPlugin.extract({
				fallback: "style-loader",
				use: "css-loader"
		})},{
			test: /\.(js|jsx)?$/,
			use: ['babel-loader'],
			exclude: /node_modules/
		}]
	},
	devServer: {
		contentBase: './dist',
		hot: true,
		port: 8088,
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: "Hello React",
			template: "template.html",
		}),
		new webpack.HotModuleReplacementPlugin(),
		new ExtractTextPlugin("style.bundle.css")
	]
};

And here is my package.json

{
  "name": "react-test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dev-server --config webpack.config.js",
    "produce": "webpack -p --config webpack.config.js"
  },
  "author": "dongxu <[email protected]>",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "html-webpack-plugin": "^2.29.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

Addtionally, there is my console window: enter image description here

As you see, I have pressed Ctrl + C twice, subsequently, I changed the content of file, the webpack-dev-server compiles again, and I can still see the content by refresh my browser.

Solution 1

If you know the name of the process, you can use the command to kill the process. I just use "Ctrl + c" twice ,stop the webpack-dev-server

Solution 2

On Linux, try Ctrl+\.
For me Ctrl+C while compiling does work but takes many seconds to die (and keeps spewing progress %), while Ctrl+\ makes webpack-dev-server (3.10.1) shut up immediately 🤐

Ctrl+\ sends SIGQUIT to current forground job. It's original purpose was debugging — kill a program and dump its memory to a core file, but the saving is disabled on many systems nowdays. It tends to be more "violent" than Ctrl+C SIGINT as almost no program catches SIGQUIT.

The latest open issue seems to be https://github.com/webpack/webpack-dev-server/issues/1479

Caveat: as other killing solutions, it won't allow the server to cleanup, as someone mentioned on that issue:

you kill process immediately, but in this moment somebody/something can write file to fs or do other async call and it is bad

Solution 3

Does anyone know how to stop webpack-dev-server?

Go to Task-Manager and close the task Node.js: Server-side JavaScript.