Webpack配置多个入口点/模板

Question

有以下任务 - 我有一个视图文件夹:

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

所以,我需要为webpack创建一个简单的配置,它可以创建以下输出'public'文件夹:

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

我明白,我可以使用多个入口点:

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

我也理解,我可以使用HtmlWebpackPlugin 注入bundle(public/js/view1.js)public/view1.html.但是多点呢？我必须为每个html视图添加HtmlWebpackPlugin吗？提前致谢!

Answer 1

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

这是我自己配置​​的示例:

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属性是关键,因为它允许您仅选择每个页面所需的资源.