Глубокое погружение в webpack

Что полезного он умеет?

• автоматически строит дерево зависимостей ресурсов;
• упаковывает модули, которые могут быть загружены «лениво», в отдельные файлы;
• выполняет оптимизацию кода;
• может делать «горячую» замену модулей на странице.

Пример с CommonJS модулями

			var shuffle = require("lodash/collection/shuffle");
			var camelCase = require("lodash/string/camelCase");
			module.exports = function (list) {
			  return shuffle(list).map(camelCase);
			};
		

Зависимостями могут быть любые файлы

• ES2015, JSX, TypeScript, …
• CSS, LESS, SASS, Stylus, …
• PNG, JPEG, SVG, WOFF, …
• Handlebars, Jade, …

Загрузчки

• преобразуют данные из одного формата в другой;
• могут добавлять в упаковку другие модули;
• как правило, делают одну трансформацию;
• работают только с одним модулем.

Плагины

• имеют доступ ко всем модулям (до и после трансформации);
• могут добавлять в упаковку свои модули (например, «runtime»);
• имеют доступ ко всем ресурсам, создаваемым после упаковки;
• применяются для изменения конфигурации сборки, оптимизации, добавления в модули каких-то объектов, горячего обновления ресурсов.

Конфигурация webpack

			module.exports = {
			  entry: "./app.js",
			  output: {
        	    path: __dirname + "/output",
        	    filename: "app.bundle.js"
    		  }
    		};
		

Явно указываем файл конфигурации

			$ webpack --config ./configs/site.js
			$ webpack --config ./configs/admin.js
		

Несколько точек входа

			entry: {
			  "site": "./site",
			  "admin": "./admin"
			}
		

Параметры финальной упаковки

			output: {
			  path: require("path").resolve("./public/_/"),
			  publicPath: "/assets/",
			  filename: "[name].js",
			  chunkFilename: "[id].chunk.js"
			}
		

Обнаружение общих модулей

			plugins: [
			  new webpack.optimize.CommonsChunkPlugin({
			    name: "commons",
			    filename: "[name].js"
			  })
			]
		

Загрузка общей части

			<-- site.html -->
			<script src="/assets/commons.js"></script>
			<script src="/assets/site.js"></script>
		

Code splitting

			require.ensure(["jquery", "lodash"],
			  function (require) {
			    var jQuery = require("jquery");
			  }
			);
		

bundle-loader

			var waitForChunk = require('bundle!./page');
			waitForChunk(function (page) {
			  page.init();
			});
		

Контекст

			// moment.js
			require("./locale/" + name);
		

Папка — ./locale
Регулярное выражение — /^.*$/

Подавляем ненужные ресурсы

			plugins: [
			  new webpack.ContextReplacementPlugin(
			    /moment[\/\\]locale$/,
			    /^(en-gb|ru)\.js$/
			  )
			]
		

Плагины для оптимизации упаковки

• DedupePlugin
• OccurenceOrderPlugin
• UglifyJsPlugin

Глобальные переменные

			new webpack.DefinePlugin({
			  "DEBUG": process.env.NODE_ENV != "production",
			  "API_ENDPOINT": "'" + URL + "'",
			  "helloWorldFunc": function () {
			    return 'Hello, world!';
			  }
			})
		

Глобальные переменные

					if (DEBUG) {
					 alert(API_ENDPOINT);
					}
					helloWorldFunc();
				

					if (false) {
					 alert(('http://example.com'));
					}
					(function () {
					 return 'Hello, world!';
					})();
				

Сервер для разработки

			$ npm i -g webpack-dev-server
			$ webpack-dev-server
		

Можно встроить в существующий сервер на Node.js или пробросить доступ к нему через прокси-сервер.

Конфигурируем плагин

			var ExtractText = require("extract-text-webpack-plugin");
			var extractStyles = new ExtractText("main.css");
			var loader = extractStyles.extract("style", "css!less");
		

Добавляем плагин и загрузчик

			plugins: [ extractStyles ]
			module: {
			  loaders: [
			    { test: /\.less$/, loader: loader }
			  ]
			}
		

Запуск задач плагином

			var MyTaskRunner = function () {};
			MyTaskRunner.prototype.apply = function (compiler) {
			  // задачи
			}
			module.exports = MyTaskRunner;
		

Запуск задач плагином

			compiler.plugin("run", function (params, callback) {
			  console.log("*** Run ***");
			  callback();
			});
			compiler.plugin("done", function () {
			  console.log("*** Done ***");
			});
		

Запуск задач

			$ npm run clean
		

			"scripts": {
			  "clean": "rm -rf ./public/_"
			}
		

Запуск задач

			$ npm run build:site
			$ npm run build:admin
		

$ npm run build:site

			"scripts": {
			  "build:site": "./node_modules/.bin/webpack --config site…
			  "build:admin": "./node_modules/.bin/webpack …
			}
		

Запуск задач

			$ npm run myCoolJavaScript
		

			"scripts": {
			  "myCoolJavaScript": "node my-cool-javascript.js"
			}
		

Владимир Кузнецов

@mistakster (English)
@mista_k (больше про жизнь)

noteskeeper.ru

Слайды презентации: mistakster.github.io/fronttalks-webpack