html-webpack-partials-plugin/examples/basic-multi/dist/index.html at 311a476c7c37cab51397be491d013703c36b22d8 · colbyfayock/html-webpack-partials-plugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!doctype html><html><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="main.js"></script></head><body><h1>Hello world!</h1><a href="other-page.html">Other Page</a><hr/><h2>webpack.config.js</h2><pre>
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPartialsPlugin = require('../../');

module.exports = {
  entry: {
    main: path.join(__dirname, './main.js')
  },
  output: {
    path: path.join(__dirname, './dist'),
    filename: '[name].js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: 'other-page.html',
      template: path.join(__dirname, './other-page.html')
    }),
    new HtmlWebpackPartialsPlugin([
      {
        path: path.join(__dirname, './partials/body.html')
      },
      {
        path: path.join(__dirname, './partials/other-body.html'),
        template_filename: 'other-page.html'
      }
    ])
  ]
};
</pre><h2>main.js</h2><pre>
console.log('Test!');
</pre><h2>other-page.html</h2><pre>
&#x3C;!DOCTYPE html&#x3E;
&#x3C;html&#x3E;
&#x3C;head&#x3E;&#x3C;/head&#x3E;
&#x3C;body&#x3E;
&#x3C;/body&#x3E;
&#x3C;/html&#x3E;
</pre><h2>partials/body.html</h2><pre>
&#x3C;h1&#x3E;Hello world!&#x3C;/h1&#x3E;
...and the rest of this configuration example
</pre><h2>partials/other-body.html</h2><pre>
&#x3C;h1&#x3E;Hello other world!&#x3C;/h1&#x3E;
</pre></body></html>