[TOC]
学习Webpack练手之作
Project
|-dist # 存放Webpack打包生成文件的目录
|-css
|-html
|-js
|-src # 项目源码目录
|-module # 项目模块目录
|-view # 模块页面目录
|-view.css # 页面的CSS
|-view.html # 页面
|-view.js # 页面的JS
|-static # 公用的静态资源
|-scripts # JS目录,存放公用JS文件,如util/common/plugin
|-lib # JS框架
|-css # ……
|-images
|-fonts
|-server
|-routerLoader.js # 渲染页面所需数据处理的方法
|-routerRender.js # 页面渲染方法
|-routerSetting.js # 路由配置:请求地址和请求处理的映射配置
|-env.js # 运行时环境配置
|-logs
|-access.log # 访问日志
|-error.log # 错误日志
Server: Node + Express + EJS
Client: jQuery + [Vue + ] Core.css
Tools: Webpack + PM2
1、Clone项目
git clone https://github.com/lzy-life/node-express-ejs-webpack
2、安装项目依赖
// npm为国外镜像速度较慢,建议安装cnpm(淘宝NPM镜像) https://npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 打包
cnpm install -g webpack
// Node进程管理工具
cnpm install -g pm2
// 项目依赖
cnpm install
3、打包项目文件(没有针对运行时环境的打包配置)
// 手动打包,测试或生产环境可用(会对代码进行压缩)
npm run build
// 自动打包,开发时可用(无代码压缩)
npm run autobuild
4、运行项目
// 使用PM2启动项目,并传递参数NODE_ENV=dev,读取env.js中的dev配置
npm run dev
// 使用PM2启动项目,并传递参数NODE_ENV=prd,读取env.js中的prd配置
npm run prd
1、Client
1.1、启动自动打包和开发两个命令
npm run autobuild
npm run dev
1.2、修改所需代码保存,回到浏览器刷新即可
2、Server
2.1、添加路由
将路径和处理方法写入 routerSetting.js 文件中
{
// 请求路径
path: '/test',
// 页面渲染所需数据,多个处理可写成数组形式
loader: routerLoader.test,
//loader: [routerLoader.test, routerLoader.testA, routerLoader.testB],
// 渲染指定EJS模板
render: routerRender.test
}
在 routerLoader.js 中添加 routerSetting.js 中配置的处理方法
//
function test(req, res, next) {
// 将需要渲染的数据赋值给 req 对象的 source 属性,无数据则空对象
req.source = {};
// 调用 next
next();
}
在 routerRender.js 中添加 routerSetting.js 中配置的处理方法
function test(req, res, next) {
// 将 req.source 渲染到 'viewName' 模板中
// 可通过 req.source.envConfig 或 req.app.locals.envConfig 获取到运行时环境配置
res.render('viewName', req.source);
}
测试新添加的路由
在浏览器中访问改路由查看渲染出来的内容
localhost:3000/test
在访问该路由的时候添加参数 debug=true 可查看该路由所加载的数据
localhost:3000/test/?debug=true
1、开发时需执行两条命令才能实现即时打包且有路由配置
1.1、webpack-dev-server可即时打包但无路由功能,且打包生成的内容在内存中不是写入文件
未尝试强制webpack-dev-server写入文件(https://github.com/gajus/write-file-webpack-plugin)
1.2、使用webpack中间件:Express + WebpackDevMiddleware + WebpackHotMiddleware
2、打包时EJS模板分隔符%会引起HtmlWebpackPlugin报错