html-layout-webpack-plugin

v1.0.0

Published

2 years ago

webpack html layout plugin

Downloads

1,248

0High
0Medium
0Low

zhw2590582

html-layout-webpack-plugin

webpack html 布局插件，适用于html模块化引用和多布局引用

Install

$ npm i -D html-layout-webpack-plugin

Usage

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlLayoutWebpackPlugin = require('html-layout-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production';

module.exports = {
	mode: isProd ? "production" : "development",
	entry: "./index.js",
	output: {
		path: __dirname + "/dist",
		filename: "index_bundle.js"
	},
	plugins: [
		new HtmlWebpackPlugin({
			filename: "index.html",
			template: "./index.html"
    }),
    // 传入对应用到的key值和对应的目录路径，key值名称和数量并无限制
		new HtmlLayoutWebpackPlugin({
			include: path.resolve('./includes'),
			layout: path.resolve('./layouts')
		})
	]
}

index.html

引用一个布局

<!-- @layout:default -->
<div class="content">
    content
</div>

layouts/default.html

定义一个布局，其中 slot = true 为内容分发，即被引用的本身数据

<!-- @include:header -->
<!-- @slot:true -->
<!-- @include:footer -->

includes/header.html

定义一个页头组件

<!DOCTYPE html>
<html>
    <head>
        <title>html-layout-webpack-plugin</title>
    </head>
    <body>

includes/footer.html

定义一个页脚组件

    </body>
</html>

Output

dist/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>html-layout-webpack-plugin</title>
    </head>
    <body>
      <div class="content">
          content
      </div>
      <script type="text/javascript" src="index_bundle.js"></script>
    </body>
</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

html-layout-webpack-plugin

Install

Usage

webpack.config.js

index.html

layouts/default.html

includes/header.html

includes/footer.html

Output

dist/index.html

License