html模块化嵌套页面,webpack4 将html 模块化

可以使用html-webpack-plugin插件来实现html模块化嵌套页面。首先需要在webpack配置文件中引入该插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

然后，在plugins选项中添加该插件的实例：

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    chunks: ['index']
  }),
  new HtmlWebpackPlugin({
    template: './src/about.html',
    filename: 'about.html',
    chunks: ['about']
  })
]

其中，template指定模板文件路径，filename指定生成的html文件名，chunks指定该页面所需的js文件。

在模板文件中，可以使用ejs语法来引入其他模块：

<% include header.html %>

<div class="content">
  <p>This is the <%= pageName %> page</p>
</div>

<% include footer.html %>

其中，<% include %>语句用来引入其他模块。在header.html和footer.html中可以放置通用的头部和尾部内容，以实现模块化嵌套页面的效果。