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插件能够自定义css目录，将css文件整合进html当中，在html当中生成link标签的引用。(利用ExtractTextPlugin也能够做到提取css，但在webpack4当中，建议使用MiniCssExtractPlugin)
最后生成的dist目录包含以下文件：

--css
bundle.js
index.html

webpack --watch
相当于对打包后生成的文件进行监听，在每次更改关联文件后，会自动重新打包生成文件，在dist目录当中可以看到打包文件，刷新页面可以查看更改。

webpack-dev-server
webpack-dev-server相当于利用webpack开启了一个本地服务器，默认8080端口，在启动后，webpack会从入口文件开始编译关联的文件。生成目标文件，但是编译后的文件不会保存在本地当中，而是存在内存当中。所以访问的路径也不是真实的本地资源路径。而是通过webpack配置的路径访问到的编译后资源。
这个时候，需要配置devServer，在wbpack官方文档中-开发中 Server(devServer)有详细的配置描述。

这里我配置了

devServer:{
	contentBase:'./',
	publicPath: '/'
}

contentBase告诉服务器从哪里提供内容，而publicPath则会覆盖output当中的publicPath。配置后的publicPath也是访问到对应资源的路径。
这个时候只需要打开浏览器，访问localhost:8080端口即可。如果设置publicPath为/xxx/,则在浏览器通过localhost:8080/xxx/可以访问到编译后的静态资源。通过谷歌开发者工具可以看到这些资源位置。