Question

有以下任务 - 我有一个包含观点的文件夹：

--views
----view1
------view1.js
------view1.html(or jade)
----view2
------view2.js
------view2.html(or jade)

所以，我需要为webpack创建一个简单的配置，它可以创建以下输出＆＃39; public＆＃39;文件夹：

--public
----js
------view1.js
------view2.js
----view1.html
----view2.html

我明白，我可以使用多个入口点：

  entry: {
    view1: './views/view1/view1'
    view2: './views/view2/view2
  }

我也理解，我可以使用HtmlWebpackPlugin在public/js/view1.js中注入bundle（public/view1.html）。但是多点呢？我必须为每个html视图添加HtmlWebpackPlugin吗？提前致谢！

Answer 1

您必须为要创建的每个.html页面添加多个HtmlWebpackPlugin部分。

以下是我自己配置的示例：

plugins: [
  new HtmlWebpackPlugin({
    title: 'SearchView',
    chunks: ['manifest', 'vendor', 'searchView'],
    template: `${PATHS.app}/index.ejs`, // Load a custom template
    inject: 'body', // Inject all scripts into the body
    filename: 'searchView.html'
  }),
  new HtmlWebpackPlugin({
    title: 'TicketView',
    chunks: ['manifest', 'vendor', 'ticketView'],
    template: `${PATHS.app}/index.ejs`, // Load a custom template
    inject: 'body', // Inject all scripts into the body
    filename: 'ticketView.html'
  })
]

chunks属性是关键，因为它允许您只选择每个页面所需的资源。

Webpack配置多个入口点/模板

1 个答案: