我们接下来配置我们的开发环境。上次我们已经配置了最基本的打包配置，但是上次我们打包的是js文件，webpack可以编译js文件，但是对于其他的html、css、img等文件，还需要额外添加插件和loader包。我们今天要说的是如何打包编译html文件以及使用我们的开发服务器。使用html插件（html-webpack-plugin）webpack插件这里就不做说明了，需要的朋友可以去官网查看。由于webpack默认打包的文件是js文件，所以我们在打包html文件的时候需要引入插件。这里我们使用html-webpack-plguin插件来生成和打包我们的html文件。下载npminstall-save-devhtml-webpack-plugin配置让我们修改我们的webpack.common.js文件并在其中添加html-webpack-plugin插件的配置。现在我们webpack.common.js文件的配置是这样的：constpath=require("path");constHtmlWebpackPlugin=require("html-webpack-plugin");letconfig={mode:process.env.NODE_ENV===“发展”？“开发”：“生产”，条目：path.resolve（__dirname，“../src/main.js”），输出：{path：path.resolve（__dirname，“../dist”），文件名：“bundle[hash].js",},plugins:[newHtmlWebpackPlugin({filename:"index.html",template:"./src/index.html"}),],};module.exports=config;然后我们说一下html-webpack-plugin的配置选项有哪些，有什么用；NameTypeDefaultDescriptiontitle{String}WebpackApp用来生成文件的HTML文档的标题{String}'index.html'写HTML的文件。默认为index.html。这里可以指定子目录（如：assets/admin.html）template{String}``webpack模板的相对或绝对路径。默认情况下它将使用（如果存在src/index.ejs）。有关详细信息，请参见文档参见示例inject{Boolean\String}truetrue\\'head'\\'body'\\false将所有资产注入给定的模板或模板内容。当传递true或'body'时，所有javascript资源都将放置在body元素的底部。'head'会将脚本放在head元素中-请参阅inject:falseexamplescriptLoading{'blocking'\'defer'}'blocking'现代浏览器支持非阻塞javascript加载（'defer'）以提高页面启动性能。favicon{String}``将给定的favicon图标路径添加到输出HTMLmeta{Object}{}以允许注入元标记。例如，meta:{viewport:'width=device-width,initial-scale=1,shrink-to-fit=no'}base{Object\String\false}false被注入到base标签中。例如base:"https://example.com/path/page.htmlminify{Boolean\Object}true如果模式是'production'，false否则控制输出是否最小化以及以何种方式最小化。有关更多详细信息，请参阅Seeminificationbelow.hash{Boolean}falseiftrue将唯一的webpack编译哈希附加到所有包含的脚本和css文件。这对于清除缓存很有用pagechunks{?}?只允许你添加一些块（例如，只有单元测试块）chunksSortMode{String\Function}auto允许控制将块包含到HTML之前应该如何排序。允许的值是'none'\'auto'\'dependency'\'manual'\{Function}excludeChunks{Array.
