@romaro

Как правильно подключить скрипт при сборке Вебпаком?

Написал учебный скрипт который должен обрабатывать форму на странице. Во время отладки код находился после тега body и все работало. Затем перенес скрипт в отдельный файл и добавил его в импорты. Предварительно подключил Babel, т.к. у меня возникала ошибка при попытке собрать проект (обработчик ругался на наличие класса).

После сборки скрипт попадает в бандл, который подключается до тега body:
<script defer src="../bundle.js"></script><link href="../style.css" rel="stylesheet"></head>


При этом я оставил вызов данного скрипта внизу страницы:
... Код страницы ...
</footer>
    <script>
        // regForm —это название формы, для которой инициализирую класс, который содержит обработчики. На странице, теоретически, может быть несколько форм.
        const regForm = new FormHandler('reg-form');
        regForm.init();
    </script>
</body>


Теперь, после загрузки страницы, получаю ошибку "FormHandler is not defined".

Если я правильно понимаю, дело не только в том, что скрипт нужно подключить после тега body? Проблема так же связана с тем, что обработчик формы инициализируется в обход Babel?

Как все-таки подключать подобные скрипты, которые могут создавать несколько экземпляров класса на странице?
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ответы на вопрос 2
delphinpro
@delphinpro
frontend developer
Дело не в бабеле, и не в вебпаке.
https://learn.javascript.ru/script-async-defer
Ответ написан
@YahorDanchanka
Frontend developer
Лучше используйте HtmlWebpackPlugin, который автоматизирует подключение скриптов и стилей за вас. Хороший Webpack config - это минимум ваших действий.
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    index: path.resolve(__dirname, 'src/scripts/example.js')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/index.html'),
      // Скрипты, которые нужно подключить к странице
      chunks: ['index'],
      // Логика загрузки
      scriptLoading: 'blocking | defer'
    })
  ],
};
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы