html引入公共的头部和脚部,Webpack多页面实现公共头部尾部

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

在日常开发中，经常会遇到这种类似头部和尾部，多个页面的拥有相同的HTML结构，如果每个页面都添加这种一样的代码，会让文件显得臃肿，且后期维护成本也很大。因此，我们可以将这些共用的HTML抽取出来形成类似组件的形式，在页面中直接引入就可以

gulp实现共用HTML

参考这里 不推荐，因为无法实时编译。

用Webpack的ejs模板实现HTML共用:

项目结构:

安装

npm install ejs-loader

npm install ejs-render-loader

npm install ejs-html-loader #### 在webpack.config.js的loader里面添加

{

test: /.ejs$/,

loader: 'ejs-html-loader',

}, #### 把.html后缀名改为.ejs 然后再HTMLWebpackPlugin里面指定template为

template: 'ejs-render-loader!index.ejs',

创建公共html放在common文件夹中，这个demo是共用header和footer，然后创建header.html和foote