Webpack Module Bundler

Собираем frontend с webpack

Обо мне

Привет. Меня зовут Павел Голован.
JavaScript и Node.js разработчик в компании Intetics.

Тобиас @sokra Копперс

О проекте

Cordova mobile SPA
~325 JS файлов
~48k строк кода

Проблемы

Монолитное приложение
Связь между файлами неочевидна
Порядок загрузки имеет значение
Конфликты в глобальной области видимости
Собственный инструмент для сборки, поддержка и развитие которого становились трудозатратными

Почему Webpack?

По данным https://www.npmjs.com/package/webpack

117 930 загрузок в день
686 388 загрузок в неделю
2 692 853 загрузок в месяц (против 1 994 700 у browserify)
19 835 ★ https://github.com/webpack/webpack
10 360 ★ https://github.com/substack/node-browserify

Почему не Browserify?

Browserify отличный и простой инструмент для сборки приложений
Есть довольно обширная система расширений (хотя и не такая большая как у webpack)
В большинстве случаев необходим Gulp/Grunt для автоматизации процесса сборки

Почему Webpack?

Webpack предоставляет огромные возможности для сборки приложений прямо из коробки
Больше нет необходимости в Gulp/Grunt
Webpack берет весь процесс сборки на себя

Что такое Webpack?

Конфигурационный файл - webpack.config.js
Сборщик
Клиентский скрипт
Загрузчики
Система расширений
Сервер разработки - webpack dev server

wepback.config.js - это Node-модуль

			module.exports = {
				context: `${__dirname}/entries`, // || process.cwd()
				entry: {
					lib: 'lib.js',
					app: 'app.js'
				},
				output: {
					path: `${__dirname}/build`,
					filename: '[name].js'
				}
			}

Сборщик

Загружает входные файлы и их зависимости
Разбивает код на фрагменты (chunks)
Оптимизирует
Хэширует
Добавляет модуль к сборке

require

			require('path-to-whatever');

Задача: добавлять файл(ы) в сборку динамически

На этапе компиляции доступна переменная logo - имя файла с логотипом. В сборку должен войти только требуемый файл.

Динамический require

			//Directory: './img'
			//Regular expression: /^.*\.svg$/
			require('./img/' + logo + '.svg')

require.context

			let imgContext = require.context('img', true, /\.svg$/);
			imgContext.keys().forEach((key) => {
			    if (key === logo) {
					  imgContext(key);
			    }
			});

Aliases

			resolve: {
		        root: path.resolve(__dirname),
		        extensions: ['', '.js', '.json'],
	        	alias: {
		            '%config%': `config${ isDebug ?
		    	'-debug' : '' }.json`,
		        }
		    }

Aliases

			require('%config%');

Aliases

			// Bad
			require('app/components/record/record-edit.js');
			require('app/components/record/record-detail.js');
			// Good
			require('%record%/record-edit.js');
			require('%record%/record-detail.js');

Условные выражения

			// platform - это переменная на этапе компиляции
			if (platform === 'native') {
			    require('native-lib.js');			
			}

Условные выражения

			// Код на клиенте
			if (true) {
			    require('native-lib.js');			
			}

DefinePlugin

DefinePlugin позволяет создавать глобальные константы, значение которых может быть сконфигурировано во время компиляции.

DefinePlugin

			// webpack.config.js
			plugins: [
			    new webpack.DefinePlugin({
			        platform: JSON.stringify(platform)	
			    })  
			]

Smart Chunks

Chunks - это фрагменты кода, которые загружаются и исполняются по требованию, что позволяет уменьшить размер исходного загружаемого файла и загружать код по по мере необходимости.

Smart Chunks

CommonJs - require.ensure(dependencies, callback)
Загружает, но не исполняет модули.
AMD - require(dependencies, callback)
Загружает и исполняет модули.

Кэширование

			// Вместо изменения версии вручную
			app_v1_3.js

Кэширование

			// Добавляем хэш файла к имени во время сборки
			output: {
			    filename: '[name]-[hash].js'
			}

Loaders

Трансформируют содержимое файлов
Расширяют базовые возможности webpack
Обрабатывают файлы во время require()

Loaders

https://webpack.github.io/docs/list-of-loaders.html - 214 loaders!

Global loaders

			// webpack.config.js
			loaders: {
			  [{ test: /\.less$/, loader: 'style!css!less?noIeCompat' }]	
			}

Global loaders

			loaders: {
			  [{
					test: /\.js$/,
					loader: 'babel-loader',		
					query: {
						presets: ['es2015'],
						cacheDirectory: true
					}	
			}]	
			}

Exports

			//Добавляет в конце модуля
			//module.exports = Handlebars;
			let Handlebars = require('exports?Handlebars!handlebars.js');

Imports

			//Добавляет в начале модуля
			//this.App = window.App;
			require('imports?this.App=>window.App!app.js');

Script loader

			// Загружает модуль 1 раз игнорируя его зависимости
			require('script!awesome-lib.js');

Plugins

Трансформируют содержимое файлов
Расширяют базовые возможности webpack
Работают для всей сборки
code->loaders->plugins->output

CommonsChunkPlugin

			//webpack.config.js
			webpackConfig.entry.vendor = ['lodash', 'moment', 'etc'];
			webpackConfig.plugins = [
			  new webpack.optimize.CommonsChunkPlugin(
				'vendor',
				'vendor.js'
				)
			];

ProvidePlugin

			//webpack.config.js
			webpackConfig.plugins = [
			  new webpack.ProvidePlugin({
					Promise: 'bluebird'
				})
			];

BannerPlugin

			//webpack.config.js
			webpackConfig.plugins = [
			  new webpack.BannerPlugin(
					'**Bundle License Code**'
				)
			];

Webpack Dashboard Plugin

Install
npm install webpack-dashboard --save-dev
Use
webpackConfig.plugins = [ new DashboardPlugin() ];
Run
webpack-dashboard -- webpack-dev-server --config ./webpack.config.js

Оптимизация

Минимизация - new webpack.optimize.UglifyJsPlugin()
Дедубликация - new webpack.optimize.DedupePlugin()
Ограничение максимального количества фрагментов кода - new webpack.optimize.LimitChunkCountPlugin({maxChunks: 15})
Ограничение максимального размера фрагмента кода - new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})

Webpack Dev Server

Node.js Express сервер
Клиентский код, который соединяется с сервером с помощью Sock.js
Сервер отправляет информацию о процессе компиляции на клиент

Webpack Dev Server configuration

		  output: {
	        path: path.resolve(__dirname, "build"),
		    publicPath: "/assets/",
		    filename: "bundle.js"
		  }

Webpack Dev Server launch

$ webpack-dev-server --inline --content-base build/

--content-base - директория собранного проекта
--inline добавляет скрипт, который обновляет страницу при изменениях

Hot Module Replacement

Обновляет клиентский скрипт без перезагрузки страницы

$ webpack-dev-server --hot --inline --content-base build/

Webpack Dev Server launch

Открываем приложение в браузере

http://localhost:8080/assets

What's next? Webpack 2

ES6 модули - import и export без преобразования к CommonJS/AMD
System.import - новый способ разделения кода. System.import возвращает Promise и дает возможность отловить ошибки при загрузке модуля.
Tree-shaking. Cтатический анализ ES6 модулей во многих случаях позволяет определить на этапе компиляции неиспользуемые модули и не включать их в сборку.