基于webpack集成的多页应用开发脚手架

在一个项目中可以同时使用vue、react、zepto等其他前端框架，也可以直接用ES6开发

前端开发模块结构

1. dist 打包后的静态文件目录
2. src 入口文件和静态资源目录
3. view html模板目录

使用方法

1. 在src目录下以xxx.page.js的格式新建入口文件。
2. 在view目录下以xxx-page.html的格式新建对应的模板文件。
3. 建完后重启webpack，就可以通过http://localhost:3000/xxx-page.html访问到新建文件。

运行命令

1. 测试命令 npm run dev
2. 打包命令 npm run build

备注

开发代码中如果使用了webpack的代码拆分功能，静态资源打包上线之前，静态资源地址参数publicPath需要改成提前设置好的线上cdn地址或者本地测试服务的地址再打包使用。因为webpack自动拆分出来的文件地址是用的参数publicPath配置好的绝对地址。如果不提前配置好，则自动拆分出来的文件会默认相对地址，导致文件找不到而产生错误。

用npm安装workbox-webpack-plugin会报错，建议所有的第三方模块用cnpm安装。

output:{//出口
	path:path.resolve(__dirname,'dist'),
	//publicPath:'http://10.30.1.52:8860/bobo-h5-share/dist/', //本地静态服务测试地址
	//publicPath:'https://wsqncdn.miaopai.com/static2018/wap/h5_push/bobo-h5-share/20181030/dist/', //线上cdn地址
	publicPath:'', //默认本地测试地址
	filename:'js/[name].js'
}

在webpack.config.js文件中配置静态资源的引用地址。

推荐使用nodejs服务器anywhere搭建本地服务器环境。

发布上线

1. 静态资源 打包后把dist里的css、img、js目录传到cdn。

2. html模板文件

   • 如果都是前端渲染的小项目的少量页面，可以直接放到cdn访问或者有域名要求，可以放到服务器上，通过配置nginx访问。
   • 如果需要后端渲染的项目，则需要搭建nodejs代理服务，将项目html文件按照代理服务规则添加到代理服务上，通过配置nginx反向代理访问。