webpack 初始化
//创建package.json
npm init -y
//webpack.config.js 配置
//package.json 内配置快捷方式 及npm 脚本
webpack.config.js 内配置入口出口文件
配置loader
输出文件
配置插件
html-webpack-plugin 热替换index.html 文件
clean-webpack-plugin 清理dist内文件
模块热替换 HMR souce-map
uglifyjs(压缩输出)
优化
1.生产环境和开发环境文件分离
2.代码分离
CommonsChunkPlugin 防止重复
3.动态导入 详见output 相关文档
www.webpackjs.com/configuration/output/#output-chunkfilename
https://www.webpackjs.com/api/module-methods/#import-
4.懒加载
懒加载或者按需加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑 断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。
搭建前端项目
https://www.jianshu.com/p/c674be93bdd6
webpack-hot-middleware
是用来进行页面的热重载的,刷新浏览器 一般和 webpack-dev-middleware
配合使用,实现像webpack-dev-server
一样的热加载功能(详见https://segmentfault.com/a/1190000011761306、https://segmentfault.com/a/1190000011761345)
单页应用程序(SPA)通常只使用Web浏览器可访问的一个索引文件:通常是index.html。然后,在HTML5历史API的帮助下,通常使用JavaScript处理应用程序中的导航。当用户点击刷新按钮或直接访问登录页面以外的页面时,这会导致问题,例如/help或/help/online,因为Web服务器绕过索引文件来定位此位置的文件。由于您的应用程序是SPA,Web服务器在尝试检索文件时将失败,并向用户返回404-未找到的消息。
https://github.com/bripkens/connect-history-api-fallback/
配置代理 http-proxy-middleware 或express-http-proxy