使用webpack将js和scss注入php

时间:2019-02-01 20:53:50

标签: javascript php webpack

因此,我正在设置Webpack并使用html-webpack-plugin将所有内容构建为html文件。效果很好,但是现在我必须创建一些PHP文件,但似乎找不到如何使它工作的单个示例。

我正在运行MAMP,并且已经在代理我的webpack-dev-server。这工作正常,我可以到达php页面。但是问题是Webpack不会注入我的HTML和CSS,所以我所看到的只是在浏览器中呈现的纯HTML / PHP文件。

最有可能是因为我没有装载机。我尝试了一些,但是已经弃用了。

在使用webpack作为编译器时,是否还有任何方法仍可以提供PHP文件?也可以使用一些涉及gulp或browsersync和webpack的解决方法。

我的开发服务器当前是这样设置的;

devServer: {
    contentBase: path.resolve(__dirname, 'app/'),
    watchContentBase: true,
    inline: true,
    hot: true,
    port: 3000,
    publicPath: 'http://localhost:8888/app',
    proxy: {
        '*': 'http://localhost:8888'
    }
},

具有我要修复的形式的PHP文件;

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Form</title>
    </head>
    <body>
    <?php include 'signupForm.php' ?>
        <main>
            <section class="sz-pitchdark">
                <div class="col-6" data-push-left="off-1">
                    <form class="contact-form" autocomplete="off">
                        <input autocomplete="off" type="hidden" name="token" id="token" value="">
                        <div class="sz-select-wrapper">
                            <select class="sz-select">
                                <option>I'm interested in</option>
                                <option>An exciting new project</option>
                                <option>Partnering up</option>
                                <option>A little chit-chat</option>
                            </select>
                        </div>

                        <div class="sz-input-wrapper">
                            <input class="sz-input" type="text" id="name"></input>
                            <label class="sz-label" for="name">
                                <span class="sz-label-text">
                                    Name
                                </span>
                            </label>
                        </div>

                        <div class="sz-input-wrapper">
                            <input class="sz-input" type="tel" id="telephone"></input>
                            <label class="sz-label" for="telephone">
                                <span class="sz-label-text">
                                    Telephone (not required)
                                </span>
                            </label>
                        </div>

                        <div class="sz-input-wrapper">
                            <input class="sz-input" type="email" id="email"></input>
                            <label class="sz-label" for="email">
                                <span class="sz-label-text">
                                    E-mail
                                </span>
                            </label>
                        </div>

                        <div class="sz-input-wrapper">
                            <textarea class="sz-input text-area" type="text" id="message"></textarea>
                            <label class="sz-label" for="message">
                                <span class="sz-label-text">
                                    You're on! Clear your heart
                                </span>
                            </label>
                        </div>

                        <div class="grid">
                            <div class="col-4">
                                <button class="sz-primary-button">
                                    Send message
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
        </main>
    </body>
</html>

0 个答案:

没有答案