webpack-dev-server配置

最近研究webpack略有小成，特此写篇博客。虽然webpack有官网api,但是个人认为webpack api一点都不人性化，
不自己研究研究，根本看不懂。今天先从写webpack-dev-server开始。webpack-dev-server的作用就是可以在
前端自己起一个服务，不用依托nginx,或者express等，更爽的是它可以实现实时更新，不用你去不停的F5刷新浏
览器。废话不多说，下面开始正文：

---

一、项目目录结构

     webpack
            build
                webpack.pro.conf.js
            src
                js
                css
                img
            index.html
            package.json
            package-lock.json 

---

二、安装需要的包

npm install webpack wepback-cli webapck-dev-server html-webpack-plugin --save-dev

 我这里是"webpack": "^4.16.2"  "webpack-cli": "^3.1.0"  "webpack-dev-server": "^3.1.5" 

 "html-webpack-plugin": "^3.2.0"

webpack4不仅要装webpack,还有webpack-cli，webpack-dev-server是我们用来启动本地服务的包，html-webpack-plugin

是webpack里的插件，可以自定义我们的首页，具体后面说。

---

三、webpack.pro.conf.js文件代码

    var path = require("path");
    var webpack = require("webpack");
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        mode:"development",
        entry:{
            app:"./src/js/main.js"
        },
        output:{
            f