demo已经传到了github,地址:https://github.com/13476075014/04.node-vue-project/tree/master/03.singlewebpack

## 一:demo目的:

如何通过webpack和node来实现多个静态页面html,多个入口,能打包,能热加载,能开发环境调试,能生成dist里面的线上需要文件;

## 二:demo难点:

1.每个html都需要引入多个静态js,这时候配置入口文件就有问题?
  解决思路:把html的多个js,或者css的需要引入的静态文件,都通过一个js先引入进去,到时候直接引入这一个js就可以了。
  
2.如何动态获取到每个html的入口js作为webpack打包的入口文件?
  解决思路:通过glob这个插件来获取所有需要作为入口文件js的文件名,成为一个数组,然后循环这个数组,去拼接json的key:filename,value:filepath,这样就可以获取到完整的入口文件。
3.如何能在开发环境热加载这些打包后的静态文件,能实时刷新改动的内容?
  解决思路:不能用webpack-dev-server,因为现在是多个单页需要访问,用这个插件用到的"webpack-dev-middleware": "^1.12.2(这个版本过高会报错我这边。。,这个版本是可以的)" 和 "webpack-hot-middleware": "^2.25.0",这两个插件来实现开发环境,读取内存里面的打包完的文件,然后通过名字匹配node的路由来进行访问;

## 三:目录结构

 

dist -- 打包后的文件存放地址,正式环境只需要这个里面的文件就可以了;
public -- 静态资源 图片,css,js 的存放地址;
public --> js --> bundle 这个文件夹是存放一个静态html对应一个js,且名字要和html的名字一致;
views -- 静态html的文件夹;
main.js - node启动项目入口js;
webpack.config.js -- 是webpack打包的入口

## 项目启动

先 npm install 安装包;
然后 本地开发运行  npm start;
发布到线上就使用 npm run prodbuild;
具体运行代码方式在 package.json里面 :
 "scripts": {
    "start": "cross-env NODE_ENV=development node --inspect=9222 main.js",
    "prodbuild": "cross-env NODE_ENV=production npx webpack"
  },

如何通过webpack和node来实现多个静态页面html,多个入口,能打包能热加载开发环境调试的更多相关文章

  1. 使用webpack热加载,开发多页面web应用

    我们一般使用webpack热加载开发SPA应用,但工作中难免会遇到一些多页面的demo或项目. 故参考 kingvid-chan 的代码,搭了一个使用HRM开发多页面web应用的脚手架,刚好也进一步学 ...

  2. webpack 教程 那些事儿03-webpack两大精华插件,热加载

    本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...

  3. webpack2+node+react+babel实现热加载(hmr)

    前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack2中的热替换相比较1更加简洁. 1. 先看效果 2.目录结构 3.项目目录结构文件描述 bin 执行 ...

  4. webpack3+node+react+babel实现热加载(hmr)

    前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack3中的热替换相比较1更加简洁. 1. 先看效果 Demo地址 https://github.com/ ...

  5. webpack无法热加载(__webpack_hmr 502)

    最近本地开发项目代码一直无法热加载,于是就抽空想办法解决 我们线上的地址是:https://aitest.ichuanyi.com/ai-admin/#/  其实ai-admin是线上的一个目录 所以 ...

  6. webpack+express实现“热更新”和“热加载”(webpack3.6以前的做法)

    “热更新”:对应的是 'webpack-dev-middleware' 中间件 “热加载”:对应的是 'webpack-hot-middleware' 中间件 为了使用这两个中间件,必须修改“webp ...

  7. Webpack热加载和React(其中有关于include和exclude的路径问题)

    看了几个React配合webpack的教程,大部分都因为版本问题过时了.终于找到了一个不错的教程.记录下其中的知识点. 首先万分感谢这个教程的制作者.少走了许多弯路,正在学习webpack的小伙伴可以 ...

  8. vagramt中同步文件,webpack不热加载

    这是一篇参考文章:https://webpack.js.org/guides/development-vagrant/ 在使用vue-cli+webpack构建的项目中,如何使用vagrant文件同步 ...

  9. Node.js实现热加载

    不管是node.js原生开发,还是借助express,kora等框架开发node.js的情况下,在对代码做出更新后,都是需要重启已生效我们的文件的. 本文记录一次在原生node.js开发的时候,为项目 ...

随机推荐

  1. 为什么集合类没有实现Cloneable和Serializable接口

    为什么集合类没有实现Cloneable和Serializable接口? 答:克隆(cloning)或者序列化(serialization)的语义和含义是跟具体的实现相关的.因此应该由集合类的具体实现类 ...

  2. SpringCloud Feign 常用代码

    服务提供者 服务提供者,是位于其他项目里面的. 服务提供者提供的方法,在Controller层里面,有可访问的Url. @Controller @RequestMapping("/order ...

  3. 网络营销CPA、CPS、CPM、CPT、CPC 是什么

    网络营销之所以越来越受到重视一个主要的原因就是因为“精准”.相比较传统媒体的陈旧广告形式,网络营销能为广告主带来更为确切的效果与回报,更有传统媒体所没有的即时互动性.很多企业借助于精准的网络营销成为人 ...

  4. THOR: Tracking Holistic Object Representations

    THOR: Tracking Holistic Object Representations BMVC 2019 Oral 2019-08-04 10:30:09 Paper: https://arx ...

  5. MySQL事务隔离级别(一)

    本文实验的测试环境:Windows 10+cmd+MySQL5.6.36+InnoDB 一.事务的基本要素(ACID) 1.原子性(Atomicity):事务开始后所有操作,要么全部做完,要么全部不做 ...

  6. 解决VS Code开发Python3语言自动补全功能

    1.打开设置界面 2)使用快捷键组合[Ctrl+Shift+p] . 输入setting,选中首选项的user setting模式设置界面 在打开的User Settings文件界面,搜索:pytho ...

  7. centos7.6下的python3.6.9虚拟环境安装elastalert

    centos7.6安装python3.6.9+elastalert .编译安装python3..9环境 # 安装依赖 yum -y install zlib-devel bzip2-devel ope ...

  8. SpringBoot @Autowired中注入静态方法或者静态变量

    注:用static去定义一个注入的方法或者配置文件值变量,编译时不会有任何异常,运行时会报空指针. Spring官方不推荐此种方法. 原理: https://www.cnblogs.com/chenf ...

  9. Nginx - 代理后端通过域名访问

    目录- 前言- Nginx 根据域名反向代理- Nginx proxy_pass 关于 '/' 的作用 1. 前言 接到一个需求,通过nginx 代理互联网上某一个页面,刚开始的时候觉得很简单的,直接 ...

  10. [LeetCode] 256. Paint House 粉刷房子

    There are a row of n houses, each house can be painted with one of the three colors: red, blue or gr ...