Кілька файлів html за допомогою webpack

87

Я намагаюся зробити щось у проекті, але я не впевнений, що це можливо, я помиляюсь або щось не розумію. Ми використовуємо 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="https://stackoverflow.com/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="https://stackoverflow.com/style/default.css">
</head>
<body>
    ...
    <script src="/example.bundle.js"></script>
</body>
</html>

Хтось знає, що я роблю не так?

Дякую.

webpack  webpack-dev-server 
— мігелітомп
джерело
Чи можете ви знайти рішення для цього? Я також шукаю той самий варіант використання.
— моніка

Відповіді:

118

Див. Точку входу як корінь дерева, яке посилається на багато інших ресурсів, таких як модулі javascript, зображення, шаблони тощо. Коли ви визначаєте більше однієї точки входу, ви в основному розділяєте свої активи на так звані шматки, щоб не мати всього коду та активів в одному наборі.

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

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

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

Погляньте на плагін html-webpack . Особливо актуально для вашого випадку використання:

Зрештою, у вас мало б з’явитися щось подібне (попередження: не перевірено)

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

Будь ласка, майте на увазі посилання на назву точки входу в масиві фрагментів, тому у вашому прикладі це має бути exampleEntry. Можливо, це також гарна ідея перемістити ваші шаблони в певну папку, а не розміщувати їх безпосередньо всередині кореневої папки src.

Сподіваюся, це допомагає.

— Андреас Ягле
джерело
4
Хороше пояснення, але все одно мене турбує те, що вам доводиться викликати "новий HTMLWebPlugin" для кожної сторінки, яку ви створюєте у своєму проекті.
— klewis
Всім не подобається називати "новий HTMLWebPlugin" кожною зі сторінок. Потрібна альтернатива.
— ChosenUser
3

Ви також можете використовувати плагін Copy Webpack, якщо вам не потрібні дві різні збірки, тобто припускаючи, що ви просто хочете обслуговувати інший HTML із однаковим main.bundle.js.

Плагін дійсно простий (протестований лише у webpack v4):

const CopyWebpackPlugin = require('copy-webpack-plugin');

const config = {
  plugins: [
    new CopyWebpackPlugin([
      { from: './src/example.html', to: './example.html' }
    ])
  ]
}

Тоді в example.htmlви можете завантажити збірку з index.html. Наприклад:

<!DOCTYPE html>
<html
<head>
    ...
    <title>Example</title>
</head>
<body>
    <div id="container"> Show an example </div>
    <script src="main.bundle.js"></script>
</body>
</html>
— Ф Лекшас
джерело
1
чи є інший спосіб використовувати CopyWebpackPlugin та додати файл bundle.js до html-файлу через webpack замість того, щоб безпосередньо давати посилання на сценарій у самому файлі html?
— Шрітам Ягадєв
3

Щоб використовувати кілька HTML- файлів у Webpackвикористанні HtmlWebpackPlugin :

Змініть webpack.config.js, безпосередньо вбудувавши наведений нижче код.

const HtmlWebpackPlugin = require('html-webpack-plugin');

let htmlPageNames = ['example1', 'example2', 'example3', 'example4'];
let multipleHtmlPlugins = htmlPageNames.map(name => {
  return new HtmlWebpackPlugin({
    template: `./src/${name}.html`, // relative path to the HTML files
    filename: `${name}.html`, // output HTML files
    chunks: [`${name}`] // respective JS files
  })
});

module.exports = {
  entry: {
    main: './js/main.js',
    example1: './js/example1.js',
    //... repeat until example 4
  },
  module: { 
       //.. your rules
  };
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      chunks: ['main']
    })
  ].concat(multipleHtmlPlugins)
  
};

Ви можете додати до htmlPageNamesмасиву стільки HTML-сторінок, скільки потрібно . Переконайтесь, що кожен HTML та відповідний файл JS мають однакові назви (наведений вище код передбачає, що це).

— РІЧАРД АБРАХАМ
джерело
0

Існує ще одне рішення, припускаючи Webpack ^ 4.44.1. Тобто, імпортувати HTML у вашу програму JS / TS.

Зразок webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
    entry: { app: './src/index.ts' },

    mode: 'development',
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Development',
            template: path.join(path.resolve(__dirname, 'src'), 'index.ejs')
        }),
    ],
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                include: [path.resolve(__dirname, 'src')],
                exclude: /node_modules/,
            },
            {
                test: /\.html$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]'
                        }
                    }
                ],
                // this exclude is required
                exclude: path.join(path.resolve(__dirname, 'src'), 'index.html')
            }
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3900
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

Відповідний додаток

import './about.html';
    
console.log('this is a test');

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Question</title>
</head>
<body>
     <a href="./about.html">About</a>
</body>
</html>

about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
</head>
<body>
    <p>This is an about page</p>
</body>
</html>

Webpack скопіює about.html у відповідну вихідну папку.

— Алекс Ноласко
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.