webpack4配置区分webpack --watch与webpack-dev-server

最近，利用webpack搭建一个简单的集成html，scss与js的脚手架，方便时常做一些简单的开发。
项目结构如下：

--dist
--src
	--scss
	index.html
	index.js
package.json
webpack.config.js

前提至少需要配置css规则和js规则，需要用到style-loader,css-loader以及scss-loader,同时需要安装node-sass模块。
入口文件设置为entry: './src/index.js'
输出文件设置为：

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: './'
  }

在package.json当中配置三种简易的webpack命令，一种是常规的webpack打包，一种是带–watch的打包，一种为适用于开发环境的webpack-dev-server。

"dev": "webpack-dev-server",
"build": "webpack",
"watch": "webpack --watch"

打包时我用到HtmlWebpackPlugin和MiniCssExtractPlugin两个插件来设置创建打包的html文件与css文件。HtmlWebpackPlugin插件能够设置html模板，在这里也就是基于src目录当中的index.html文件。同时，输出的js文件会被引用在script标签当中。MiniCssExtractPlugin插件能够自定