Webpack - внешний доступ к модулям

Webpack – внешний доступ к модулям

Добавляем в файл home.js – exports

let welcome = require('./welcome');

welcome(" мир!");

exports.welcome = welcome;

Файл welcome.js остается прежним

module.exports = function(message) {
  alert(`Привет ${message}`);
}

В файл webpack.config.js – добавляем library

module.exports = {
  entry: "./home",
  output: {
    filename: "build.js",
    library: "home"
  }
}

Запускаем сборку

npx webpack

Теперь можно вызывать функцию в файле home.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <script src="./dist/build.js"></script>
</head>
<body>
  
</body>
<script>
  home.welcome("солнце!")
</script>
</head>
</html>

Переборка проекта при изменениях

Для автоматической пересборки при изменения, нужно добавить в файл webpack.config.js – watch: true, например так:

module.exports = {
  entry: "./home",
  output: {
    filename: "build.js",
    library: "home"
  },
  watch: true
}

Оставить комментарий