webpack-使用html-webpack-plugin和ejs-loader将侧栏、头部、底部公共html做成模板，并生成合并后的html页面...

在学习前端自动化之前一直使用 PHP，JSP 将在每个页面将头部、侧栏、底部等部分引入，现在前端 “娱乐圈” 一直噼里啪啦的每天出新东西，自从接触了前端自动化我就觉得这种工作可以交给前端了但一直没时间研究一下。最近有时间看一下，踩了好多坑终于成功实现了。。

准备工作

• 学习 webpack
• 学习 html-webpack-plugin
• 学习 ejs-loader

感觉有些关键点文档中没提到，我下面会一一列举出来

最终文件结构

├─.gitignore
├─package-lock.json
├─package.json
├─webpack.config.js
├─src
|  ├─form.ejs
|  ├─index.ejs
|  ├─index.js
|  ├─style.css
|  ├─table.ejs
|  ├─templates
|  |     ├─footer.ejs
|  |     ├─header.ejs
|  |     ├─left.ejs
|  |     └─nav.ejs

webpack 配置文件（webpack.config.js）

这里假设大家已经做好了准备工作，会基本的 webpack 使用，且已经安装了 html-webpack-plugin 和 ejs-loader

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

module.exports = {
   // 注意0：相对路径的"./"要写上（省略掉会报各种错误。。）
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      // 注意1：这里的后缀要和module.rules配置的ejs-loader的一样才能自动去用ejs-loader语法解析，否则要手动指定（用ejs-loader!src/index.ejs）
      template: './src/index.ejs',
    }),
    new HtmlWebpackPlugin({
      filename: 'table.html',
      template: './src/table.ejs',
    }),
    new HtmlWebpackPlugin({
      filename: 'form.html',
      template: './src/form.ejs',
    })
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      // 注意2：虽然html-webpack-plugin会默认解析ejs语法，但我测试的时候无法解析导入的侧栏、头部、底部的模板
      {
        test: /\.ejs$/,
        loader: "ejs-loader?variable=data"
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

模板文件（.ejs）

具体看还是看note/01 前端 / webpack - 使用 html-webpack-plugin 和 ejs-loader 将侧栏、头部、底部公共 html 做成模板，并生成合并后的 html 页面 at master · 1010543618/note吧

注意：ejs 本来是用<%- include('xxx') %>引如模板的，而我测试 ejs-loader 不能这么用得用<%= require('xxx')() %>（ejs-loader 处理后是个方法，调用该方法会返回处理后的 HTML）

index.ejs

  
  


<%= require('./templates/header.ejs')() %>
  
  

    
    

      
Article heading

      
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

      
subsection

      
Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.

      
Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.

      
Another subsection

      
Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.

      
Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.
    
    <%= require('./templates/left.ejs')() %>
  
<%= require('./templates/footer.ejs')() %>

header.ejs

我来组成头部
<%= require('./nav.ejs')() %>

nav.ejs

  

    
不
    
加上
    
一个
    
导航
    
么！？
  

   

   

     
     
   

转载于:https://www.cnblogs.com/jffun-blog/p/9465254.html