基于webpack的前端工程化开发解决方案探索（三）：webpack

　　前两篇中我们使用webpack完成了静态资源（css/js/img）等自动写入HTML模板中，同时还可以为静态资源添加hash版本号，既满足了我们对于静态资源的打包要求，同时又无需开发人员介入打包过程，让我们的重点集中在业务逻辑的实现上来。但是每次修改完代码后如果手动执行 webpack 命令才能生效的话，那也够虐心的，好在的webpack为我们提供了一个强力的开发工具：webpack-dev-server！

　　一、代码压缩

　　在开始了解webpack-dev-server之前，我们还有一件准备工作需要做，那就是完成对代码的压缩混淆，不仅可以保证代码的安全性，还可以降低资源文件的大小，减少网络传输。

　　A. 压缩HTML

 1 new HtmlWebpackPlugin({            //根据模板插入css/js等生成最终HTML 2       favicon:'./src/img/favicon.ico', //favicon路径 3       filename:'/view/index.html',  //生成的html存放路径，相对于 path 4       template:'./src/view/index.html',  //html模板路径 5       inject:true,  //允许插件修改哪些内容，包括head与body 6       hash:true,  //为静态资源生成hash值 7       minify:{  //压缩HTML文件 8         removeComments:true,  //移除HTML中的注释 9         collapseWhitespace:true  //删除空白符与换行符10       }11     })

原标题：基于webpack的前端工程化开发解决方案探索（三）：webpack

关键词：前端