Array-Huang / webpack-seed

这是一个基于webpack的多页应用脚手架
https://segmentfault.com/a/1190000006843916
MIT License
1.19k stars 283 forks source link

利用webpack生成html模版的问题 #22

Closed YealZoy closed 7 years ago

YealZoy commented 7 years ago

第一段代码

pageArr.forEach((page) => {
  const htmlPlugin = new HtmlWebpackPlugin({
//这里面没有pageTitle,而你的项目里面直接<%=pageTitle%>
    filename: `${page}/page.html`,
    template: path.resolve(dirVars.pagesDir, `./${page}/html.js`),
    chunks: [page, 'commons/commons'],
    hash: true, // 为静态资源生成hash值
    xhtml: true,
  });
  configPlugins.push(htmlPlugin);
});

看你的ejs模版上面写的是<%=pageTitle%>

第二段代码

但是

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    title: '简单页面',
    filename: 'index.html',
  })],
};
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> 
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <h1>这是一个用<b>html-webpack-plugin</b>生成的HTML页面</h1>
    <p>大家仔细瞧好了</p>
  </body>
</html>

这个模版上写的是<%= htmlWebpackPlugin.options.title %>

这中间还做了什么配置吗?

YealZoy commented 7 years ago

已经弄清楚了