How can I wrap and concatenate js file with template file into one React Component?

Question

Is there any webpack plugin or do I need to create my own plugin to solve this issue?

I try to create react component by define OOP prototype way as below:

Input: component.js

Check if exist: component.html

Then: try to concat component.js with wrap file template component.html file with pre-text and post-text
Else: keep component.js file

See my Example:

LoginPage.js

const React = require("react");

function LoginPage() {
    React.Component.call(this);

}
LoginPage.prototype = {LoginPage.constructor, ...React.Component.prototype};

LoginPage.prototype.doLogin = function() {
    // TODO: call service api
};

LoginPage.html

<div class="vbox">
    <style>
        require("../common/layout-style.scss");
        require("../common/theme-style.scss");
        .input-group {
            flex: 1 auto,
            margin-bottom: 1em;
        }
    </style>
    <script type="text/javascript">
        const InputGroup = require("../common/InputGroup");
    </script>
    <div class="vbox">
        <span class="title">Login Page</span>
        <InputGroup class="input-group" label="Email:" type="text" vertical />
        <InputGroup class="input-group" label="Password:" type="password" vertical />
        <div class="hbox">
            <button click={doLogin}>Login</button>
        </div>
    </div>
</div>

Is there any Webpack Plugin to wrap and concat them into one before babel compile like:

const React = require("react");
const InputGroup = require("../common/InputGroup");

function LoginPage() {
    React.Component.call(this);

}
LoginPage.prototype = {LoginPage.constructor, ...React.Component.prototype};

LoginPage.prototype.doLogin = function() {
    // TODO: call service API
};

LoginPage.prototype.render = function() {
    return (
        <div class="vbox">
            <style>
                require("../common/layout-style.scss");
                require("../common/theme-style.scss");
                .input-group {
                    flex: 1 auto,
                    margin-bottom: 1em;
                }
            </style>
            <div class="vbox">
                <span class="title">Login Page</span>
                <InputGroup class="input-group" label="Email:" type="text" vertical />
                <InputGroup class="input-group" label="Password:" type="password" vertical />
                <div class="hbox">
                    <button click={doLogin}>Login</button>
                </div>
            </div>
        </div>
    );
};

score 1 · Answer 1 · answered Aug 18 '21 at 08:24

I was looking for a solution to the exact same problem. Thats how I got here. In the "old days" tasks like this where handled by Grunt or Gulp and as the webpack-page states:

"...webpack is a module bundler like Browserify or Brunch. It is not a task runner like Make, Grunt, or Gulp."

So I suggest you should still turn to Grunt or Gulp for this kind fo tasks.

You should probably then look here: https://github.com/gruntjs/grunt-contrib-concat and here: How to grunt concat in a wrapping function

How can I wrap and concatenate js file with template file into one React Component?

1 Answers1