html文件如何打包？

　　要弄明白这个问题，我们先要弄清楚什么是开发环境，什么是生产环境。开发环境中是基本不会对js进行压缩的，在开发预览时我们需要明确的报错行数和错误信息，所以完全没有必要压缩JavasScript代码。而生产环境中才会压缩JS代码，用于加快程序的工作效率。devServer用于开发环境，而压缩JS用于生产环境，在开发环境中作生产环境的事情所以Webpack设置了冲突报错。

　　生产环境中压缩js会无法调试（找不到第几行）

　　在实际开发中，webpack配置文件是分开的，开发环境一个文件，生产环境一个文件。

　　1、html文件的打包

　　把dist目录下面的index.html剪切复制到src目录下，index.html里面引入的js代码可以删除掉（会自动引入js代码），这就是模板文件

　　在webpack-config.js里面引入插件

　　plugins:[

　　newhtmlPlugin({

　　minify：{

　　removeAttributeQuotes:true//对html进行压缩，去掉属性的双引号

　　hash:true,//为了开发中js有缓存效果，加入hash可以有效避免缓存JS

　　template:'./src/index.html'//是要打包的html模板路径和文件名称

　　})

　　]

　　i｢wds｣:Projectisrunningathttp://10.212.109.18:8087/

　　i｢wds｣:webpackoutputisservedfrom/

　　i｢wds｣:ContentnotfromwebpackisservedfromF:\webLearn\webpackLearn\dist

　　‼｢wdm｣:Hash:027dd749b565ba3b200d

　　Version:webpack4.15.1

　　Time:3008ms

　　Builtat:2018-07-1108:49:13

　　AssetSizeChunksChunkNames

　　entry2.js139KiB0[emitted]entry2

　　entry.js145KiB1[emitted]entryindex.html427bytes[emitted]

　　Entrypointentry=entry.js

　　Entrypointentry2=entry2.js

　　出现上述代码即成功

　　如下所示即打包成功

　　Hash:40112e2b8d4dc81b512b

　　Version:webpack4.15.1

　　Time:5299ms

　　Builtat:2018-07-1108:47:26

　　AssetSizeChunksChunkNames

　　entry2.js962bytes0[emitted]entry2

　　entry.js6.75KiB1[emitted]entry

　　index.html427bytes[emitted]

　　[0]./src/entry2.js33bytes{0}[built]

　　[4]./node_modules/css-loader!./src/css/index.css227bytes{1}[built]

　　[5]./src/css/index.css1.06KiB{1}[built]

　　[6]./src/entry.js94bytes{1}[built]

　　+3hiddenmodules

　　WARNINGinconfiguration

　　The'mode'optionhasnotbeenset,webpackwillfallbackto'production'forthisvalue.Set'mode'optionto'development'or'production'toenabledefaultsforeachenvironment.

　　Youcanalsosetitto'none'todisableanydefaultbehavior.Learnmore:https://webpack.js.org/concepts/mode/

　　Childhtml-webpack-pluginfor"index.html":1asset

　　[0](webpack)/buildin/module.js497bytes{0}[built]

　　[1](webpack)/buildin/global.js489bytes{0}[built]

　　[3]./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html511bytes{0}[built]

　　+1hiddenmodule

　　把dist目录删掉，在终端输入webpack进行打包

　　在终端输入npmrundev在浏览器中运行

　　plugins里面配置如下：

　　consthtmlPlugin=require(‘html-webpack-plugin’);

　　在终端里面进行安装：npminstall–save-devhtml-webpack-plugin

　　配置html