主页 / 问题 / 682563
Accepted
Maxmaxmaximus
Asked:2020-06-22 22:52:02 +0000 UTC2020-06-22 22:52:02 +0000 UTC

Cordova + Webpack + Hot Module Replacement (HMR) 如何设置开发？

  • 772

如何设置项目以使用 webpack 为 Codova 开发应用程序，甚至热插拔 HMR 模块。这样当您更改代码时，您手机上的应用程序就会实时更新？

javascript

1 个回答

  1. Best Answer

    哦，大声笑，我想出了什么，好吧，简而言之，我只是制作了一个在 webpack 开发服务器上设置的 iframe)))) 去哪里，但是如果有人为 cordova 和 webpack 编写插件，我会的非常感激

    我只是将以下代码放在 cordova/www/index.html 文件中：

    <head>

    <meta charset="UTF-8">
    <title>Main Transrus</title>
    <meta name='viewport'
          content='user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width'>


    <script type="text/javascript" src="cordova.js"></script>
    <script>
        document.addEventListener("deviceready", init, false)

        function init() {
            var iframe = document.createElement('iframe')

            // айпишник моего компа по локалке, который виден с телефона по wifi, ну и порт вебпак дев сервера
            iframe.src = 'http://192.168.2.33:1337'  

            document.body.appendChild(iframe)

            // пробрасываем внутрь фрейма кордову и её плагины    
            iframe.contentWindow.cordova = window.cordova
            iframe.contentWindow.navigator.camera = window.navigator.camera

            iframe.addEventListener('load', function () {
                iframe.contentWindow.addEventListener('unload', function () {
                    // при попытке вебпака перезагрузить страницу, удаляем фрейм, и создаем новый
                    document.body.removeChild(iframe)
                    console.clear()
                    init()
                })
            })

        }
    </script>

    <!-- Немного раскрасим наше дебаг приложение -->
    <style>
        body {
            margin: 0;
            background: url('./img/logo.png') no-repeat center, linear-gradient(to bottom, #fff3f7, #d3effa);
            background-size: 40% auto, 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: flex-end;
        }

        iframe {
            position: absolute;
            width: 100%;
            height: 100%;
            border: none;
            z-index: 100;
        }

        h1 {
            margin-bottom: 2em;
            color: #666;
            font-size: 2em;
            font-weight: 100;
        }
    </style>
</head>

<body>
<h1>Загрузка...</h1>
</body>
    • 1

相关问题