webpack wraps source code with a function and optionally requires requested libs. This can be helpful to provide templated code as a function.
npm install function-wrap-loader
The following is an example using this to wrap jsx template files.
Example react template file template.jsx
:
<div class="testclass"></div>
Use the loader after the jsx loader (or babel or something else), and specify react
at React
:
var template = require("function-wrap-loader?React=react!jsx!./template.jsx");
Turns template.jsx
in to:
var React = __webpack_require__(10);
module.exports = function () { return React.createElement("div", {class: "testclass"}) };
Pass hoistRequires=true
to hoist any requires/import statements outside the function wrap. This assumes requires/imports are at the top of the file and uses regexes to identify them. This will be replaced by inspection of the AST in the future. This is useful for requiring components in templates:
Example react template file template.jsx
:
import _ from 'lodash';
var __ = require('underscore');
<div class="testclass"></div>
Use the loader after the jsx loader (or babel or something else), and specify react
at React
, as well as hoistRequires=true
:
var template = require("function-wrap-loader?React=react&hoistRequires=true!jsx!./template.jsx");
Turns template.jsx
in to:
var React = __webpack_require__(10);
var _ = __webpack_require__(12);
var __ = __webpack_require__(13);
module.exports = function () { return React.createElement("div", {class: "testclass"}) };
Pass allowLocals=true
to enable local variables before the return statement in a function body. This assumes the return statement starts with a <
, (
, {
, or [
. This will be replaced by inspection of the AST in the future. This is useful for enabling local variables in templates.
Example react template file template.jsx
:
import _ from 'lodash';
var a = 1;
<div class="testclass"></div>
Use the loader after the jsx loader (or babel or something else), and specify react
at React
, as well as hoistRequires=true
:
var template = require("function-wrap-loader?React=react&hoistRequires=true&useLocals=true!jsx!./template.jsx");
Turns template.jsx
in to:
var React = __webpack_require__(10);
var _ = __webpack_require__(12);
module.exports = function () { var a = 1; return React.createElement("div", {class: "testclass"}); };