webpack3——html插件（HtmlWebpackplugin）

背景：一般情况下，我们需要通过一个ip地址，或者是通过localhost的方式来访问一个页面，这种情况下，我们需要进行设置。
解决办法：使用webpack-dev-server
安装完webpack-dev-server 后，可以直接运行npx webpack-dev-server，会生成一个地址。

1.不做任何设置

如果不做任何设置，直接在项目目录下运行npx webpack-dev-server，打开默认的地址，会进入当前项目的目录，但我们希望能够直接进入项目的html这个静态文件，所以需要设置

2.如何设置webpack-dev-server

设置webpack-dev-server，其实就是设置开发服务器，可以做webpack.config.js
中的module.export中的devServer中进行设置，具体设置如下所示

module.exports = {
    devServer:{//这里开发服务器的配置
        port:3000,//设置端口号
        progress:true,//打包的时候可以加一个滚动条
        contentBase:'./dist',//设置服务器默认打开的位置
        open:true,//设置为true，可以自动打开浏览器
    },
   ......
   }
   

3.高级设置

在src下建一个index.html模板，如何让打包后的路径指向这个模板，我们可以看到这个情况。此时，需要一个插件
注：只是进行服务器的设置，但是如果要打包还得依靠webpack。

4.如何打包html页面，将打包结果放到dist目录下

使用plugins插件设置，利用html-webpack-plugins方式进行设置，
（1）安装html-webpack-plugins插件在项目中
（2）在webpack.config.js中进行设置，如代码所示

    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html",//告诉模板的位置
            filename:"index.html"
        })
    ]

5.项目使用webpack压缩

采用webpack命令之后，打包后的目录中会新出现index.html,现在要对这个html文件进行压缩，需要用minify进行设置

minify:{
                removeAttributeQuotes:true,//删除双引号,会智能识别，不该删掉的双引号不会删掉。
                collapseWhitespace:true,将所有代码文件生成一行

            },
            hash:true  //打包时添加hash

注：加入希望每次打包生成的包不一样，可以给打成的包的文件名中加入时间戳，防止覆盖

output:{
        filename:'bundle.[hash:8].js',//打包后的文件名，加入时间戳，使得每一次生成的项目都不一样,8限制生成的时间戳的位数。
        path:path.resolve(__dirname,'dist'),//路径必须是绝对路径,改语法的作用是在当前目录下解析出一个dist目录来
    }