webpack

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

https://www.jianshu.com/p/846e8b555ead