webpack-entry-html

发表于   |   分类于

项目中有多个 js 入口，要将编译生成的 js 分别插入到不同的 html 页面中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
entry: {
  app: './app/main.js',
  source: './source/index.js'
},
plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    chunks: ['manifest', 'vendor', 'app'],
  }),
  new HtmlWebpackPlugin({
    filename: 'demo.html',
    template: 'demo.html',
    inject: false,
    chunks: ['manifest', 'vendor', 'source'],
  }),
],

demo.html 中指定插入位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>demo</title>
    <% for (var css in htmlWebpackPlugin.files.css) { %>
    <link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet" />
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
    <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
    <% } %>
    <script type="text/javascript" src="./static/app/utils.js"></script>
    <script>
      // other js
    </script>
  </body>
</html>