前两篇中我们使用webpack完成了静态资源(css/js/img)等自动写入HTML模板中,同时还可以为静态资源添加hash版本号,既满足了我们对于静态资源的打包要求,同时又无需开发人员介入打包过程,让我们的重点集中在业务逻辑的实现上来。但是每次修改完代码后如果手动执行 w ...
前两篇中我们使用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
关键词:前端
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。