webpack打包工具,自动打包配置，即使预览，在自动打包完毕之后，默认打开服务器网页

一，自动打包
默认情况下，我们更改入口js文件的代码，需要重新运行命令打包webpack，才能生成出口的js文件
那么每次都要重新执行命令打包，这是一个非常繁琐的事情，那么，自动打包可以解决这样繁琐的操作。
实现自动打包功能的步骤如下：

A.安装自动打包功能的包:webpack-dev-server
npm install webpack-dev-server -D

B.修改package.json中的dev指令如下：
"scripts":{
"dev":"webpack-dev-server"
}

C.将引入的js文件路径更改为：<script src="/bundle.js"></script>

D.运行npm run dev，进行打包

E.打开网址查看效果：http://localhost:8080

        注意：webpack-dev-server自动打包的输出文件，默认放到了服务器的根目录中（服务器根目录，一般加上浏览器自动打开就不需要引入js了，因为浏览器自动打开，会自动引入js）

二，自动打包完成即时打开浏览器

        在自动打包完毕之后，默认打开服务器网页，实现方式就是打开package.json文件，修改dev命令：
          "dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

三，自动打开浏览器，跳转成预览页面（跳转到src目录），而不是文件根目录

因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面
还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。
实现默认预览页面功能的步骤如下：

A.安装默认预览功能的包:html-webpack-plugin
npm install html-webpack-plugin -D

B.修改webpack.config.js文件，如下：
//导入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//创建对象
const htmlPlugin = new HtmlWebpackPlugin({
//设置生成预览页面的模板文件
template:"./src/index.html",
//设置生成的预览页面名称
filename:"index.html"
})

C.继续修改webpack.config.js文件，添加plugins信息：
module.exports = {
......
plugins:[ htmlPlugin ]
}