Настройка Webpack и сервера: методы и примеры кода

Команда «npm install webpack server» устанавливает пакеты веб-пакета и сервера из реестра npm. Вот несколько методов, которые вы можете использовать с примерами кода для выполнения различных задач, связанных с настройкой веб-пакета и сервера:

Метод 1: базовая конфигурация веб-пакета
Создайте файл webpack.config.js в корневом каталоге вашего проекта:

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

Метод 2: сервер разработки Webpack
Чтобы использовать webpack-dev-server для локальной разработки с автоматической перезагрузкой:

Установите пакет webpack-dev-server:

npm install webpack-dev-server --save-dev

Обновите файл webpack.config.js:

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 8080,
  },
};

Метод 3. Настройка базового сервера Express
Установите пакет Express:

npm install express --save

Создайте файл server.js:

// server.js
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
  res.send('Hello, World!');
});
app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

Метод 4: интеграция Webpack с Express Server
Установите пакеты webpack-dev-middleware и webpack-hot-middleware:

npm install webpack-dev-middleware webpack-hot-middleware --save-dev

Обновите файл server.js:

// server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackConfig = require('./webpack.config');
const app = express();
const port = 3000;
const compiler = webpack(webpackConfig);
app.use(
  webpackDevMiddleware(compiler, {
    publicPath: webpackConfig.output.publicPath,
  })
);
app.use(webpackHotMiddleware(compiler));
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/dist/index.html');
});
app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});