vega-webpack-engine
基于webpack的多入口构建方案
基于tp5.1 开发环境,
配置
配置文件 webpack.config.js
moduleexports = output: path: 'public/static-dist/' // 用于生产环境下的输出目录 publicPath: '/static-dist/' // 用于开发环境下的输出目录 libs: // 共用的依赖 'base': 'libs/base.js' //可以是一个js文件, 'html5shiv': 'html5shiv' 'fix-ie': 'console-polyfill' 'respond-js' //也可以是一个npm依赖包 'jquery-insertAtCaret': 'libs/js/jquery-insertAtCaret.js' noParseDeps: //不需要解析的依赖,加快编译速度 'jquery/dist/jquery.js' 'bootstrap/dist/js/bootstrap.js' onlyCopys: //纯拷贝文件到输出的libs目录下 name: 'es-ckeditor' ignore: '**/samples/**' '**/lang/!(zh-cn.js)' '**/kityformula/libs/**' };
package.json
对无关配置进行了省略
nodemon.json
触发重启node服务
注意:需手动在项目根目录下,添加.webpack-watch.log
文件
实时编译
实体编译,用于开发模式下,在对前端模块代码修改后,能实时编译生效。
启动实时编译服务:
npm run dev
启动服务后,默认会在本地启动3030端口的前端模块实时编译服务。
可用参数:
port:PORT_NUMBER
:指定服务端口。例如:npm run dev port:3000sourcemap:true
:生成 Source map;verbose:true
: 显示编译详情,开启此选项后,控制台会输出每个文件被编译的详情;analyzer:true
:开启依赖分析工具,打包后文件过大,需要查看都包含了哪些依赖时使用。watch:PATH
:指定监听实时编译的资源,以加快实时编译的速度。支持指定Module、插件、主题的前端资源,例如:npm run dev watch:custom # 只监听定制开发的前端资源npm run dev watch:ExamplePlugin # 只监听 Example 插件的前端资源npm run dev watch:example # 只监听 Example 主题的前端资源npm run dev watch:custom,ExamplePlugin # 也可同时监听多个的前端资源
编译实体文件
编译实体文体:
npm run compile
可用参数:
sourcemap:true
:生成 Source map;module:PATH
: 指定只编译的前端资源,以加快编译速度。支持指定Module、插件、主题的前端资源,例如:npm run compile module:custom # 只编译打包定制开发的前端资源npm run compile module:ExamplePlugin # 只编译打包 Example 插件的前端资源npm run compile module:example # 只编译打包 Example 主题的前端资源npm run compile module:custom,ExamplePlugin # 也可同时编译打包多个前端资源
常见错误
模块不存在
错误提示:
ERROR in multi ....
Module not found: Error: Cannot resolve 'file' or 'directory'
解决办法:
rm -rf node_modulesyarn
app crashed
错误提示:
[nodemon] app crashed - waiting for file changes before starting...
解决办法:
在控制台(终端)里输入rs
,然后回车。
内存泄漏
错误提示:
<--- Last few GCs --->
14 ms: Mark-sweep 2.2 (37.1) -> 2.1 (38.1) MB, 2.8 / 0 ms [allocation failure] [GC in old space requested].
15 ms: Mark-sweep 2.1 (38.1) -> 2.1 (39.1) MB, 1.2 / 0 ms [allocation failure] [GC in old space requested].
16 ms: Mark-sweep 2.1 (39.1) -> 2.1 (39.1) MB, 0.9 / 0 ms [last resort gc].
17 ms: Mark-sweep 2.1 (39.1) -> 2.1 (39.1) MB, 1.0 / 0 ms [last resort gc].
...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory
解决办法:
重新执行命令:npm run dev
或npm run compile
。
端口被占用
events.js:154
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE 0.0.0.0:3030
at Object.exports._errnoException (util.js:893:11)
at exports._exceptionWithHostPort (util.js:916:20)
at Server.__dirname.Server.Server._listen2 (net.js:1246:14)
....
解决方法:该错误表明你已经开启了一个端口号为3030的服务,需要先把那个服务关掉。
lsof -i:3030kill -9 xxxxx
系统默认最大文件打开数过少
报错信息:
watch ... ENOSPC
解决方法: 在控制台输入
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p