National Pizza Magistrate

    es-webpack-engine

    4.7.0 • Public • Published

    es-webpack-engine

    基于webpack的多入口构建方案-内部使用

    配置

    配置文件 webpack.config.js

    module.exports = {
        output: {
            // 用于生产环境下的输出目录
            path: 'web/static-dist/', 
            // 用于开发环境下的输出目录      
            publicPath: '/static-dist/', 
        },
        // 共用的依赖
        libs: { 
            //可以是一个js文件
            'base': ['libs/base.js'], ,
            'html5shiv': ['html5shiv'],
            //也可以是一个npm依赖包
            'fix-ie': ['console-polyfill', 'respond-js'], 
            'jquery-insertAtCaret': ['libs/js/jquery-insertAtCaret.js'],
        },
        // 不需要解析的依赖,加快编译速度
        noParseDeps: {
            'jquery': 'jquery/dist/jquery.js',
            'bootstrap': 'bootstrap/dist/js/bootstrap.js',
        }
        // 纯拷贝文件到输出的libs目录下
        onlyCopys: [ 
        {
          name: 'es-ckeditor',
          ignore: [
            '**/samples/**',
            '**/lang/!(zh-cn.js)',
            '**/kityformula/libs/**',
          ]
        }]
    };

    package.json

    对无关配置进行了省略

    {
        "devDependencies": {
            "es-webpack-engine": "3.5.0",
        },
        "scripts": {
            "dev": "cross-env NODE_ENV=development nodemon --max_old_space_size=4096 node_modules/es-webpack-engine/dist/webpack.dev.js --parameters webpack.config.js",
            "dev:debug": "npm run dev sourcemap:true",
            "dev:custom": "npm run dev watch:CustomBundle",
            "compile": "node --max_old_space_size=4096 node_modules/es-webpack-engine/dist/webpack.prod.js --parameters webpack.config.js",
            "compile:debug": "npm run compile sourcemap:true",
            "compile:custom": "npm run compile module:CustomBundle",
        }
    }
    

    nodemon.json

    触发重启node服务

    {
        "watch": [
            "webpack.config.js",
            ".webpack-watch.log"
        ]
    }
    

    注意:需手动在项目根目录下,添加.webpack-watch.log文件

    实时编译

    实体编译,用于开发模式下,在对前端模块代码修改后,能实时编译生效。

    启动实时编译服务:

    npm run dev

    启动服务后,默认会在本地启动3030端口的前端模块实时编译服务。

    可用参数:

    • port:PORT_NUMBER:指定服务端口。例如:
      npm run dev port:3000
    • sourcemap:true:生成 Source map;
    • verbose:true: 显示编译详情,开启此选项后,控制台会输出每个文件被编译的详情;
    • analyzer:true:开启依赖分析工具,打包后文件过大,需要查看都包含了哪些依赖时使用。
    • watch:PATH:指定监听实时编译的资源,以加快实时编译的速度。支持指定Bundle、插件、主题的前端资源,例如:
      npm run dev watch:CustomBundle # 只监听定制开发的前端资源
      npm run dev watch:ExamplePlugin # 只监听 Example 插件的前端资源
      npm run dev watch:example # 只监听 Example 主题的前端资源
      npm run dev watch:CustomBundle,ExamplePlugin # 也可同时监听多个的前端资源

    编译实体文件

    编译实体文体:

    npm run compile

    可用参数:

    • sourcemap:true:生成 Source map;
    • module:PATH: 指定只编译的前端资源,以加快编译速度。支持指定Bundle、插件、主题的前端资源,例如:
      npm run compile module:CustomBundle # 只编译打包定制开发的前端资源
      npm run compile module:ExamplePlugin # 只编译打包 Example 插件的前端资源
      npm run compile module:example # 只编译打包 Example 主题的前端资源
      npm run compile module:CustomBundle,ExamplePlugin # 也可同时编译打包多个前端资源

    常见错误

    模块不存在

    错误提示:

    ERROR in multi ....
        Module not found: Error: Cannot resolve 'file' or 'directory' 
    

    解决办法:

    rm -rf node_modules
    yarn

    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 devnpm 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:3030
    kill -9 xxxxx(PID编号)

    系统默认最大文件打开数过少

    报错信息:

    watch ...  ENOSPC
    

    解决方法: 在控制台输入

    echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

    Keywords

    Install

    npm i es-webpack-engine

    DownloadsWeekly Downloads

    10

    Version

    4.7.0

    License

    MIT

    Unpacked Size

    288 kB

    Total Files

    27

    Last publish

    Collaborators

    • lileiseven
    • codeages-admin