Как html-webpack-plugin работает с html-загрузчиком?

Я думал, что загрузчик вызывается только тогда, когда какой-то ресурс импортируется или требует где-то d и ресурсы совпадают с таким загрузчиком.

Но в следующих кодах html-файл нигде не импортируется, но html-загрузчик по-прежнему необходим для прохождения компиляции из-за подчеркивания шаблона в html.

Итак, у меня есть следующие вопросы:

  1. Когда приходит html-загрузчик? После или до генерации пакета?
  2. Почему webpack вызывает html-загрузчик? Из-за настройки шаблона в плагине?

  3. Использует ли плагин вывод загрузчика? Но вывод - это просто строка, и как это может изменить ситуацию?

    //webpack.config.js
const webpack = require('webpack');
const path = require('path');
const htmlPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        a: './a.js'
    },
    output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [
    {
      test: /\.html$/,
      loader: "html-loader"
    }
    ]
},
plugins: [
        new htmlPlugin({
        template:path.resolve(__dirname,'index.html')

    })
]
};  

//index.html
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <script id="item-template" type="text/template">    
        <label><%= title %></label>
      </script>

    </body>
    </html>
Источник

1 ответ

Как вы сказали, Webpack знает о файлах только тогда, когда вы их "импортируете", в противном случае он не знает.

Однако сначала Webpack обращается к вашему html-файлу через html-webpack-plugin. Вы, вероятно, используетеhtml-webpack-pluginпо шаблонным причинам. Я использую его исключительно для того, чтобы веб-пакет автоматически вставлял сгенерированный пакет JS и CSS в html. Имена моих файлов пакетов содержат "хеши" (например, bundle.b88ef660a5aa8442f616.js). Я не хочу делать это вручную.

На данном этапе, html-loader не имеет ничего общего с html-webpack-plugin. Причина, по которой вы можете дополнительно использоватьhtml-loaderобъясняется ниже.

Что, если ваш шаблон содержит изображения? Некоторые люди делают (а это неправильно) используютcopy-webpack-pluginдля копирования папки изображений в папку output / dist и ссылки на любые изображения в html относительно этой папки. Это неправильно, потому что ваши изображения обходят веб-пакет и теряют преимущества веб-пакета, такие как добавление хеширования к именам изображений, оптимизация изображений, встряхивание дерева и т. Д. Если вы это сделаете, веб-пакет не знает о ваших изображениях, и вам придется вручную следить за своими изображениями. папка.

"Правильный" способ - сообщить webpack о зависимостях вашего изображения, "потребовав" изображения. Так что вместо<img src="./img/my-image.jpg"> в html вы должны написать <img src="${require(./img/my-image.jpg)}" />. НО изменение всех ссылок на изображения на требуемую версию является обременительным, поэтому когда вы используетеhtml-loader, он сделает это автоматически.

Это может сразу вызвать ошибку. Ошибка будет примерно такой:Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.

Вся эта ошибка означает, что webpack не знает, как обрабатывать изображения. И чтобы указать веб-пакету, как обращаться с тем, о чем он не знает, вам нужно использовать соответствующий загрузчик. В этом случае,file-loader.

Выше приведено наиболее частое использование, которое я встречал webpack-html-plugin а также html-loader.

Источник

Я постараюсь ответить на ваши вопросы в моих силах:

От htmlWebpackPlugin до html-загрузчика нет зависимости.

  1. Html-загрузчик вступает в игру, когда webpack обнаруживает в вашем javascript следующее: require('./app.component.html'), потому что у вас есть следующий тест: /\.html$/, Действие по умолчанию - поместить html из этого файла в место, где указано требование.

  2. Html-загрузчик не зависит от HtmlWebpackPlugin.

  3. Насколько я знаю, нет.

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

Источник
Другие вопросы по тегам