Несколько html файлов с помощью webpack

Я пытаюсь сделать что-то в проекте, и я не уверен, что это возможно, я ошибаюсь или что-то недопонимаю. Мы используем webpack, и идея состоит в том, чтобы обслуживать более одного html файла.

localhost: 8181 → служит index.html
localhost: 8181/example.html → служит example.html

Я пытаюсь сделать это, установив несколько точек входа, следуя документации:

Структура папок:

/
|- package.json
|- webpack.config.js
  /src
   |- index.html
   |- example.html
   | /js
      |- main.js
      |- example.js

Webpack.config.js:

...
entry: {
    main: './js/main.js',
    exampleEntry: './js/example.js'
},
output: {
    path: path.resolve(__dirname, 'build', 'target'),
    publicPath: '/',
    filename: '[name].bundle.js',
    chunkFilename: '[id].bundle_[chunkhash].js',
    sourceMapFilename: '[file].map'
},
...

index.html

<!DOCTYPE html>
<html
<head>
    ...
    <link type="text/css" href="/style/default.css">
</head>
<body>
    <div id="container"></div>
    <script src="/main.bundle.js"></script>
</body>
</html>

example.html:

<!DOCTYPE html>
<html
<head>
    ...
    <link type="text/css" href="/style/default.css">
</head>
<body>
    ...
    <script src="/example.bundle.js"></script>
</body>
</html>

Кто-нибудь знает, что я делаю неправильно?

Спасибо.

Ответы

Ответ 1

См. точку входа в качестве корня дерева, которая ссылается на многие другие активы, такие как модули javascript, изображения, шаблоны и т.д. Когда вы определяете более одной точки входа, вы в основном разделяете свои активы на так называемые куски, чтобы не иметь весь свой код и активы в одном пакете.

Я думаю, что вы хотите получить более одного "index.html" для разных приложений, которые также относятся к различным фрагментам ваших активов, которые вы уже определили с вашими точками входа.

Копирование файла index.html или даже создание его со ссылками на эти точки входа не обрабатывается механизмом точки входа - это наоборот. Основной подход для обработки html-страниц - это использовать html-webpack-plugin, который может не только копировать html файлы, но также иметь обширный механизм для шаблонов. Это особенно полезно, если вы хотите, чтобы ваши пакеты были суффиксными с хэшем пакета, что довольно важно, чтобы избежать проблем с кешированием браузера при обновлении вашего приложения.

Как вы определили шаблон имен как [id].bundle_[chunkhash].js, вы больше не можете ссылаться на свой пакет javascript как main.bundle.js, поскольку он будет называться как-то вроде main.bundle_73efb6da.js.

Посмотрите html-webpack-plugin. Особенно важно для вашего случая использования:

Вероятно, у вас должно быть что-то подобное (предупреждение: не проверено)

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'src/index.html',
    chunks: ['main']
  }),
  new HtmlWebpackPlugin({
    filename: 'example.html',
    template: 'src/example.html',
    chunks: ['exampleEntry']
  })
]

Обратите внимание, чтобы указать имя точки входа в массиве chunks, поэтому в вашем примере это должно быть exampleEntry. Вероятно, это также хорошая идея переместить ваши шаблоны в определенную папку вместо их непосредственно внутри корневой папки src.

Надеюсь, что это поможет.