Webpack конфигурация

Haunted — это легковесная библиотека для создания веб-компонентов с реактивным подходом, вдохновлённая React Hooks. При работе с Haunted в современных проектах часто требуется сборка через Webpack, чтобы использовать современный JavaScript (ESModules, JSX-подобные шаблоны) и оптимизировать производственный бандл. Разберём основные аспекты конфигурации Webpack для Haunted.

1. Основные зависимости

Для корректной работы Haunted через Webpack потребуются следующие пакеты:

npm install webpack webpack-cli webpack-dev-server --save-dev
npm install babel-loader @babel/core @babel/preset-env --save-dev
npm install html-webpack-plugin clean-webpack-plugin --save-dev
  • webpack, webpack-cli — ядро сборщика.
  • webpack-dev-server — локальный сервер с хот-релоадом.
  • babel-loader, @babel/core, @babel/preset-env — транспиляция современного JS для поддержки старых браузеров.
  • html-webpack-plugin — генерация HTML с подключённым бандлом.
  • clean-webpack-plugin — очистка папки сборки перед каждым билдом.

Если используется TypeScript, добавляется:

npm install ts-loader typescript --save-dev

2. Структура проекта

Пример минимальной структуры:

/project-root
  /src
    index.js
    app.js
    /components
      my-component.js
  /dist
  webpack.config.js
  package.json
  • index.js — точка входа.
  • components/ — отдельные веб-компоненты, созданные через Haunted.
  • dist/ — конечная сборка.

3. Базовая конфигурация Webpack

Простейший конфиг для Haunted:

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true,
  },
};

Особенности конфигурации:

  • entry указывает точку входа, обычно главный JS-файл.
  • output задаёт путь и имя бандла.
  • mode может быть development для отладки или production для минификации.
  • babel-loader позволяет использовать синтаксис Haunted (hooks, шаблоны через html из lit-html).
  • HtmlWebpackPlugin автоматически вставляет скрипт в HTML.
  • CleanWebpackPlugin очищает папку сборки перед каждым билдом.
  • devServer обеспечивает локальный сервер с горячей перезагрузкой.

4. Настройка Babel для Haunted

Для Haunted важно корректно транспилировать современный JS, включая class fields и template literals. Пример .babelrc:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead",
      "modules": false
    }]
  ]
}

Если используются JSX-подобные шаблоны через lit-html или haunted, добавляются соответствующие плагины:

{
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

5. Обработка CSS и других ресурсов

Для полноценного проекта часто нужно подключать CSS и ассеты:

npm install style-loader css-loader file-loader --save-dev

В webpack.config.js:

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(png|jpg|svg)$/,
      type: 'asset/resource'
    }
  ]
}
  • style-loader внедряет CSS в DOM.
  • css-loader позволяет импортировать CSS как модули.
  • asset/resource копирует изображения в папку сборки и возвращает путь.

6. Оптимизация для production

Для продакшн-сборки добавляются минификация и код-сплиттинг:

mode: 'production',
output: {
  filename: '[name].[contenthash].js',
  path: path.resolve(__dirname, 'dist'),
  clean: true
},
optimization: {
  splitChunks: {
    chunks: 'all'
  }
}
  • [contenthash] обеспечивает кэширование.
  • splitChunks разбивает бандл на части, что ускоряет загрузку.
  • clean: true заменяет CleanWebpackPlugin в новых версиях Webpack.

7. Интеграция Haunted с Webpack Dev Server

Для удобной разработки важно:

devServer: {
  static: {
    directory: path.join(__dirname, 'dist')
  },
  compress: true,
  port: 3000,
  hot: true,
  open: true
}
  • compress: true включение gzip.
  • hot: true — поддержка горячей перезагрузки Haunted-компонентов.
  • open: true — автоматически открывает браузер.

8. Пример подключения Haunted-компонента

src/components/my-component.js:

import { html, render } from 'lit-html';
import { component, useState } from 'haunted';

function MyComponent() {
  const [count, setCount] = useState(0);

  return html`
    

      
Счётчик: ${count}

      
    

  `;
}

customElements.define('my-component', component(MyComponent));

src/index.js:

import './components/my-component.js';

const root = document.getElementById('app');
render(html``, root);

Webpack с этой конфигурацией корректно собирает Haunted-компоненты и поддерживает реактивность через useState.

Оглавление