Сборка JavaScript модулей с помощью Webpack
Доброго времени суток! В данной статье я расскажу Вам как можно собрать все JavaScript модули в один js-файл, который затем будет подключаться на странице.
Вы можете спросить - а зачем это нужно? Отвечаю - современная фронтенд разработка ушла далеко вперед. Браузерные JavaScript-приложения стали больше, количество файлов и строк кода в них измеряется тысячами. Поэтому, чтобы с ними было проще работать, используют модули - файлы JavaScript кода, которые включают в себя логику в рамках какой-то определенной сферы. Модулей много и все их подключать на страницу по отдельности нехорошо, так как это увеличит время ответа клиенту и в конечном итоге может привести к тому, что пользователь уйдет с сайта. Поэтому придумали такие инструменты - как сборщики (бандлеры) модулей для JavaScript. С помощью них - несколько отдельных модулей можно собрать в один JS-файл - бандл (пакет), который браузер быстрее загрузить и быстрее выполнит.
Сборщиков модулей существует большое количество, некоторые из них это - Browserify, Webpack, Parcel. Далее я покажу Вам как можно собрать JS-пакет (бандл) с помощью Webpack.
В корне проекта есть папка src со следующим содержимым:
app.js
index.html
Test.js
Код app.js
// импортируем модуль
import Test from './Test.js';
// ссылка на DOM
const appDOM = document.querySelector('#app');
// создаем объект класса Test
const test = new Test();
// записываем значение вызова метода в DOM
appDOM.innerHTML = test.render()
Код Test.js
class Test
{
render() {
return ('Я простой JavaScript класс-модуль');
}
}
export default Test;
Код index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Далее нам нужно установить сам Webpack и средство командной строки, с помощью которого мы будем непосредственно работать с Webpack. Для этого надо выполнить команду yarn или npm install, предварительно создав package.json файл с содержанием указанным ниже:
файл package.json
{
"name": "js-bundle-all-modules",
"version": "1.0.0",
"main": "src/app.js",
"license": "MIT",
"scripts": {
"dev": "webpack --mode development",
"start": "webpack-dev-server --open",
"prod": "webpack --mode production"
},
"devDependencies": {
"@babel/core": "^7.11.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.11.0",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
В общем, уже можно запускать команду yarn dev в консоли - и проект будет собран в папке dist. Если вы заглянете в нее, то увидите файлы app.bundle.js и index.html. Если запустить команду yarn prod - то проект соберется в режиме production, результат - минифицированный и трудный для чтения человеком код, но очень хорошо понятный браузеру. Если же, запустить команду yarn start - то запустится сервер разработки, который откроет браузер. Теперь любые изменения вносимые в файлы проекта, будут приводить к автоматической пересборке и отображению результатов в браузере.
Но мы пойдем дальше и настроим Webpack несколько по своему:
Код файла webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// конфигурация Webpack - это обычный JS-модуль
module.exports = {
entry: {
app: './src/app.js', // файл с которого начинается сборка
},
output: {
filename: '[name].bundle.js', // итоговый собранный пакет
path: path.resolve(__dirname, './dist'), // папка куда помещаем собранный пакет
},
devtool: 'inline-source-map', // карты кода для отладки
devServer: {
contentBase: './dist', // папка из которой будет брать контент сервер разработки
},
// правила преобразования
module: {
rules: [
{
test: /\.js$/, // для всех javascript-файлов
exclude: /node_modules/, // за исключением папки с загружаемыми пакетами
use: {
loader: 'babel-loader', // используем транспайлер Babel
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}
}
]
},
plugins: [
// данный плагин вставляет ссылку на собранный пакет в html шаблон
new HtmlWebpackPlugin({
template: './src/index.html'
}),
]
};
Вот таким образом, мы собрали все наши модули в один пакет с помощью Webpack.
-
Создано 01.09.2020 08:22:56
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.