Разработка
Если вы следовали руководствам, вы должны хорошо понимать основы webpack. Прежде чем продолжить, давайте посмотрим на настройку среды разработки, чтобы облегчить нашу работу.
Давайте начнём с установки mode на 'development' и title на 'Development'.
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
+ mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
},
plugins: [
new HtmlWebpackPlugin({
- title: 'Output Management',
+ title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
}; Использование карт исходного кода
Когда webpack собирает ваш исходный код, может быть трудно отследить ошибки и предупреждения до их первоначального местоположения. Например, если вы объединяете три исходных файла (a.js, b.js, и c.js) в один бандл (bundle.js) и один из исходных файлов содержит ошибку, трассировка стека будет указывать на bundle.js. Это не всегда полезно, так как вам, скорее всего, нужно знать, из какого именно исходного файла произошла ошибка.
Чтобы упростить отслеживание ошибок и предупреждений, JavaScript предлагает карты исходного кода, которые сопоставляют ваш скомпилированный код с исходным. Если ошибка произошла из b.js, карта исходного кода точно об этом сообщит.
Существует множество различных вариантов карт исходного кода. Обязательно ознакомьтесь с ними, чтобы настроить их под свои нужды.
В этом руководстве давайте используем вариант inline-source-map, который подходит для иллюстративных целей (хотя не для производства):
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
},
+ devtool: 'inline-source-map',
plugins: [
new HtmlWebpackPlugin({
title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
}; Теперь давайте создадим что-то, что можно отладить, добавив ошибку в наш файл print.js:
src/print.js
export default function printMe() {
- console.log('I get called from print.js!');
+ cosnole.log('I get called from print.js!');
} Запустите npm run build, это должно скомпилироваться примерно так:
... [webpack-cli] Compilation finished asset index.bundle.js 1.38 MiB [emitted] (name: index) asset print.bundle.js 6.25 KiB [emitted] (name: print) asset index.html 272 bytes [emitted] runtime modules 1.9 KiB 9 modules cacheable modules 530 KiB ./src/index.js 406 bytes [built] [code generated] ./src/print.js 83 bytes [built] [code generated] ./node_modules/lodash/lodash.js 530 KiB [built] [code generated] webpack 5.4.0 compiled successfully in 706 ms
Теперь откройте получившийся index.html файл в вашем браузере. Нажмите кнопку и посмотрите в консоли, где отображается ошибка. Сообщение об ошибке должно быть примерно таким:
Uncaught ReferenceError: cosnole is not defined at HTMLButtonElement.printMe (print.js:2)
Мы видим, что ошибка также содержит ссылку на файл (print.js) и номер строки (2), где произошла ошибка. Это отлично, так как теперь мы знаем, где искать причину проблемы.
Выбор инструмента разработки
Ручное выполнение npm run build каждый раз при компиляции кода быстро становится утомительным.
Существует несколько вариантов в webpack, которые помогают автоматически компилировать код при его изменении:
- Режим наблюдения webpack, Watch Mode
- webpack-dev-server
- webpack-dev-middleware
В большинстве случаев вы, вероятно, захотите использовать webpack-dev-server, но давайте рассмотрим все вышеперечисленные варианты.
Использование режима наблюдения (Watch Mode)
Вы можете указать webpack «наблюдать» за всеми файлами в вашей зависимости для изменений. Если один из этих файлов обновлён, код будет перекомпилирован, так что вам не придётся вручную запускать полную сборку.
Давайте добавим npm-скрипт, который запустит Watch Mode webpack:
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "watch": "webpack --watch",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
},
"dependencies": {
"lodash": "^4.17.20"
}
} Теперь запустите npm run watch из командной строки и посмотрите, как webpack компилирует ваш код. Вы увидите, что команда не завершается, поскольку скрипт следит за файлами.
Теперь, пока webpack следит за файлами, давайте удалим ошибку, которую мы добавили ранее:
src/print.js
export default function printMe() {
- cosnole.log('I get called from print.js!');
+ console.log('I get called from print.js!');
} Теперь сохраните файл и проверьте окно терминала. Вы должны увидеть, что webpack автоматически перекомпилирует изменённый модуль!
Единственный недостаток заключается в том, что вам нужно обновить браузер, чтобы увидеть изменения. Было бы намного лучше, если бы это происходило автоматически, поэтому давайте попробуем webpack-dev-server, который сделает именно это.
Использование webpack-dev-server
Сервер webpack-dev-server предоставляет вам базовый веб-сервер и возможность использования живой перезагрузки. Давайте его настроим:
npm install --save-dev webpack-dev-server
Измените файл конфигурации, чтобы указать серверу dev, где искать файлы:
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
},
devtool: 'inline-source-map',
+ devServer: {
+ static: './dist',
+ },
plugins: [
new HtmlWebpackPlugin({
title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
+ optimization: {
+ runtimeChunk: 'single',
+ },
}; Это указывает webpack-dev-server на обслуживание файлов из каталога dist по адресу localhost:8080.
Давайте добавим скрипт для простого запуска сервера dev:
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
+ "start": "webpack serve --open",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"lodash": "^4.17.20"
}
} Теперь мы можем запустить npm start из командной строки, и наш браузер автоматически загрузит нашу страницу. Если вы теперь измените любой исходный файл и сохраните его, веб-сервер автоматически перезагрузит страницу после компиляции кода. Попробуйте!
Сервер webpack-dev-server имеет много настраиваемых параметров. Подробнее см. в документации.
Использование webpack-dev-middleware
webpack-dev-middleware — это обёртка, которая выводит файлы, обработанные webpack, на сервер. Он используется в webpack-dev-server внутренне, но доступен как отдельный пакет, чтобы предоставить больше возможностей для настройки, если это необходимо. Мы рассмотрим пример, который комбинирует webpack-dev-middleware с сервером Express.
Давайте установим express и webpack-dev-middleware, чтобы начать:
npm install --save-dev express webpack-dev-middleware
Теперь нам нужно внести некоторые изменения в наш файл конфигурации webpack, чтобы убедиться, что middleware будет работать правильно:
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
},
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
+ publicPath: '/',
},
}; publicPath будет использоваться в нашем скрипте сервера, чтобы убедиться, что файлы правильно обслуживаются по адресу http://localhost:3000. Мы определим номер порта позже. Следующий шаг — настройка нашего собственного сервера express:
project
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
+ |- server.js
|- /dist
|- /src
|- index.js
|- print.js
|- /node_modules server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
})
);
// Serve the files on port 3000.
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
}); Теперь добавим npm-скрипт для упрощения запуска сервера:
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack serve --open",
+ "server": "node server.js",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"express": "^4.17.1",
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-middleware": "^4.0.2",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"lodash": "^4.17.20"
}
} Теперь в терминале запустите npm run server, вы должны получить вывод, похожий на этот:
Example app listening on port 3000! ... <i> [webpack-dev-middleware] asset index.bundle.js 1.38 MiB [emitted] (name: index) <i> asset print.bundle.js 6.25 KiB [emitted] (name: print) <i> asset index.html 274 bytes [emitted] <i> runtime modules 1.9 KiB 9 modules <i> cacheable modules 530 KiB <i> ./src/index.js 406 bytes [built] [code generated] <i> ./src/print.js 83 bytes [built] [code generated] <i> ./node_modules/lodash/lodash.js 530 KiB [built] [code generated] <i> webpack 5.4.0 compiled successfully in 709 ms <i> [webpack-dev-middleware] Compiled successfully. <i> [webpack-dev-middleware] Compiling... <i> [webpack-dev-middleware] assets by status 1.38 MiB [cached] 2 assets <i> cached modules 530 KiB (javascript) 1.9 KiB (runtime) [cached] 12 modules <i> webpack 5.4.0 compiled successfully in 19 ms <i> [webpack-dev-middleware] Compiled successfully.
Теперь откройте браузер и перейдите по адресу http://localhost:3000. Вы должны увидеть запущенное и работающее приложение webpack!
Настройка редактора кода
При использовании автоматической компиляции кода могут возникнуть проблемы при сохранении файлов. Некоторые редакторы имеют функцию «безопасного сохранения», которая потенциально может мешать перекомпиляции.
Чтобы отключить эту функцию в некоторых распространённых редакторах, см. список ниже:
-
Sublime Text 3: Добавьте
atomic_save: 'false'в ваши пользовательские настройки. -
IDE JetBrains (например, WebStorm): Снимите флажок «Использовать безопасное сохранение» в
Preferences > Appearance & Behavior > System Settings. -
Vim: Добавьте
:set backupcopy=yesв свои настройки.
Заключение
Теперь, когда вы узнали, как автоматически компилировать код и запускать сервер разработки, вы можете перейти к следующему руководству, которое охватывает Разделение кода.
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/guides/development
