Webpack - Как требовать файл результата в базовом html (лучшая практика)

Question

Я только начал использовать Webpack для своего SPA, и у меня есть вопрос. Как мне получить пакет результатов/файл в моем HTML? Должен ли я использовать тег или лучше для этого?

Answer 1

Вы можете автоматически включать все пакеты JavaScript и CSS, используя HTML Webpack Plugin.

Пример

Для установки плагина нужно запустить npm install html-webpack-plugin --save-dev в каталоге проекта.

В следующем примере плагин будет читать исходный HTML-файл и автоматически добавлять имеющиеся файлы CSS в head и все пакеты JavaScript до конца body. Он отлично играет с ExtractTextPlugin. Если у вас больше кусков пакетов, они также будут добавлены соответственно.

В качестве бонуса вы можете использовать двигатель any template, если хотите динамически изменять или генерировать части вашего HTML-файла. Из коробки он поддерживает механизм шаблонов EJS с возможностью использования любых других via loaders.

var webpack = require("webpack"); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './src/js/entry',     // Source JavaScript file 
    output: { 
     path: './bin/',      // Output directory 
     filename: "./js/bundle.js"    // Result JavaScript file 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      template: './src/index.html',  // Source HTML file 
      filename: './index.html'   // Result HTML file 
     }), 
    ] 
}; 

Стоит отметить, что HTML Webpack Плагин имеет много возможностей, чтобы играть, в том числе Минимизация, фильтрация ломти, добавление файла хэш URL, чтобы предотвратить кэширование ... Вы можете узнать о тех, и многое другое в documentation.

Answer 2

Вы можете посмотреть мое стартерное семя с помощью web-сайта angular2 +. Все файлы были в директории сборки (app.js, vendor.js, polyfills.js) + карты

Link to webpack.config.js

Answer 3

Webpack представляет собой модуль пакетирования. Он свяжет весь ваш SPA в одном или нескольких пакетах javascript в соответствии с вашей конфигурацией webpack. Теперь нам нужно импортировать эти js-пакеты внутри нашего HTML-кода, и единственный способ вставить эти вещи в наш HTML - это использовать тег скрипта. Поэтому вы импортируете их в свой html следующим образом:

<script src="bundle.js"></script> 

Так что да, это лучшая практика.