1.0.1 • Published 6 years ago
@drupe/html-plugin v1.0.1
html-plugin
Use html files as client entry points.
Installation
npm i @drupe/html-pluginUsage
Build integration
module.exports = build => {
// Place the following code in your build module:
require('html-plugin')(build, {
// Available options:
// The url that leads to the directory of bundled client files:
// If you mount your dist/client directory at '/dist', urlPrefix should be '/dist/'
urlPrefix: '',
// Test condition for the html loader:
test: /\.html$/
});
};Server side
/index.js
import path from 'path';
import express from 'express';
// Import an html file:
// The html file will be parsed to detect which scripts to bundle as client entry points.
// The modified html with replaced script tags will be embedded into the imported handler function.
// Note that the html file should contain valid html5.
import page from './app.html';
const app = express();
app.get('/', page); // Mount the imported handler
app.use('/dist', express.static(path.join(__dirname, 'dist/client')));
app.listen(8080);
// Use page.html to get the preprocessed html code:
console.log(page.html);Client side
/app.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<!-- Bundle a client entry module and include it: -->
<script module="./app.js"></script>
</head>
<body>
</body>
</html>/app.js
// This fill will be bundled alongside other client entry points.
console.log('Hello World!');