webpack-dev-server启动了一个使用express的Http服务器，这个服务器与客户端采用websocket通信协议，当原始文件发生改变，webpack-dev-server会实时编译。
这里注意两点:
1.webpack-dev-server伺服的是资源文件，不会对index.html的修改做出反应
2.webpack-dev-server生成的文件在内存中，因此不会呈现于目录中，生成路径由content-base指定，不会输出到output目录中。
3.默认情况下: webpack-dev-server会在content-base路径下寻找index.html作为首页
4.webpack-dev-server不是一个插件，而是一个web服务器，所以不要想当然地将其引入
content-base 用于设定生成的文件所在目录
eg:
const path = require('path');
const HtmlWebpackPlugin= require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
var ManifestPlugin = require('webpack-manifest-plugin');
const webpack= require('webpack');
module.exports = {
entry: {
main: './src/main.js'
},
devServer: {
historyApiFallback: true,
noInfo: true,
contentBase: './dist'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
}
}
}
]
},
devtool: 'inline-source-map',
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
};
这里设定在dist文件夹下生成文件，能够看到dist文件夹下未生成文件（index.html是本人手动创建的），而index.html的引入路径应为
必须注意的是: 如果配置了output的publicPath这个字段的值的话，index.html的路径也得做出相应修改，因为webpack-dev-server伺服的文件时相对于publicPath这个路径的。
那么，如果:
output: { filename: '[name].js', path: path.resolve(__dirname, 'dist'), publicPath: '/a/' }
那么，index.html的路径为: