Команда «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}`);
});