Конфигурация
Самый простой способ установить webpack - использовать npm.
Предпочтительно устанавливать его локально (без тега -g). Это позволит убедиться, что все, кто работает над вашим проектом, имеют ту же версию webpack.
npm install webpack --save-dev
Как только мы установим его, лучше всего запустить webpack через npm скрипт. Добавьте эти строки к вашему package.json:
"scripts": {
"build": "webpack",
"watch": "webpack --watch"
},
Теперь, вызывая сборку npm run build из терминала, мы собраем webpack bundle наших файлов. Запуск npm run watch запустит процесс, который автоматически собирает файлы при изменении любого из них.
Последняя часть настройки - сообщить webpack, какие файлы собирать. Создадим файл конфигурации webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Параметр entry указывает webpack основной файл javascript. Существует множество различных стратегий настройки точек входа, но в большинстве случаев достаточно одной точки входа.
В output мы указываем имя и путь пакета. После запуска webpack мы получим весь наш javascript в файле main.bundle.js. Этот единственный файл подключим к html страничке:
<script src="./dist/main.bundle.js"></script>
Такой настройки уже достаточно, чтобы начать работу. Откройте страницу в браузере и убедитесь.
Теперь посмотрим как работают модули. Создадим класс test.js:
export class Test {
getMessage() {
console.log("Message send");
}
}
Подключим его в index.js и воспользуемся методом класса:
import {Test} from './test';
const test = new Test();
console.log('Init');
test.getMessage();
Теперь, когда мы запускаем npm run build и открываем страницу, мы видим сообщение из класса/модуля.
Наша точка входа и наш модуль test были скомпилированы в один файл, называемый main.bundle.js, и он был выполнен браузером.
Допустим я хочу использовать библотеку в своем проекте. Я фанат lodash, жить без нее не могу. Сначала установим библиотеку через npm:
npm i lodash --save
Затем просто импортируем библиотеку точно так же, как мы импортировали локальный модуль test:
import _ from 'lodash/index';
import {Test} from './test';
const test = new Test();
console.log('Init');
test.getMessage();
console.log(_.VERSION);
Проверьте результат. Вы должны увидеть версию установленного lodash.
Loaders - это способ webpack выполнять задачи во время компоновки и до или после обработки файлов каким-либо образом. Например, они могут компилировать typescript, загружать компоненты, отображать шаблоны и многое другое. Большинство загрузчиков написаны сообществом, список популярных loaders можно посмотреть здесь:
https://webpack.js.org/loaders/
Предположим, мы хотим добавить jshint к нашему проекту, который проверяет код на наличие ошибок и выдвигает к программисту жесткие требования в плане синтаксиса. Мы можем это сделать включив jshint-loader.
Сначала нужно установить jshint и jshint-loader:
npm install jshint jshint-loader --save-dev
Теперь добавим в конфигурацию webpack. Это инициализирует loader, даст ему понять, какие типы файлов следует проверять, а какие - игнорировать:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
use: {loader: 'jshint-loader'}
}
]
}
};
Теперь, когда webpack запущен, он покажет нам список предупреждений в терминале. Поскольку lodash находится в папке node_modules, он не будет проигнорирован. Мы увидим только предупреждения об использовании ES6.
Вот и все. Мы охватили самые полезные и обязательные концепции webpack. Что еще почитать можете найти здесь: