WEBPACK

Ludzkie wprowadzenieRadosław Rosłaniec

DLACZEGO WEBPACK?code splitting

multiple entry points

loaders

plugins

dev-OMG-server + hot+YEA+loader = <3

PO CO MI TO?

SINGLE ENTRY module.exports = entry: './src/app.js', output: path: __dirname + '/built/', filename: 'app.js'

MULTIPLE ENTRIES module.exports = entry: app: './src/app.js', other: './src/other.js', , output: path: __dirname + '/built/', filename: '[name].js'

require.ensure([], function() var module = require('./module.js'); module(args); );

module.exports = entry: app: './src/app.js', , output: path: __dirname + '/built/', filename: 'bundle.js'

lub w konfiguracji

LOADERSrequire("loader?with=parameter!./file")

module: loaders: [ test: /\.coffee$/, loader: "coffee­loader" ]

KOLEJNOŚĆpreLoaders

loaders

konkretne podczas importu (require('raw!./file.js'))

postLoaders

NIE OGARNIESZ TEGObasic

: Loads file as JSON: Loads HanSON file (JSON for Humans) as JSON object

: Loads raw content of a file (as utf-8): Executes code as module and consider exports as JavaScript code

: Executes code as a module, casts output to a string and exports it: Imports stuff to the module: Exports stuff from the module: Expose exports from a module to the global context

: Executes a JavaScript file once in global context (like in script tag), requires are not parsed.: Executes a exported JavaScript function, optionally with arguments, and exports its return value.

: Parses your JS, calls specified functions (which you implement in webpack context) and replaces them with the results: This is a preprocesser for the webpack module bundler. It support the if directive,similar to C #ifdef .

: Extract sourceMappingURL comments from modules and offer it to webpack: Computes the checksum of a file

: Emits an empty module.: Emits a module with a cowsay header.

: Loads csv/tsv files.: Loads glsl files and support glsl-chunks.

: Adds React.render to your component for you (not very practical in most cases): Loads XML as JSON.

: Load SVG files as JSX-ified React.createClass declarations.: Loads file content as base64 string

: A loader to annotate dependency injections in Angular.js applications.: Loads .node files that are produced using node-gyp.

: Require a whole directory of trees in bulk. Require JS, Import CSS and imports stuff in it. Generates iconfont from .svg files (uses gulp-iconfont)

Generic loader for rewriting only parts of files, based on content start/end delimiters. Bundler configuration loader, a tool to include bundler configuration in the resulting build.

jsonhsonrawvalto-stringimportsexportsexposescriptapplycallbackif-loadersource-mapchecksumnullcowsaydsvglslrender-placementxmlsvg-reactbase64ng-annotatenoderequirediconsblock-loaderbundler-configuration

packaging: Emits the file into the output folder and returns the (relative) url.: The url loader works like the file loader, but can return a Data Url if the file is smaller than a limit.

: Prepares HTML and CSS modules to be extracted into a separate file (lean alternative to the ExtractTextWebpackPlugin).: The worker loader creates a WebWorker for the provided file. The bundling of dependencies of the Worker is transparent.

: Like the worker loader, but for .: Like the worker loader, but designed for .

: Wraps request in a require.ensure block (callback): Wraps request in a require.ensure block (promise)

: Same as bundle, but provides a way to handle script loading errors. Wraps request in a require.ensure block (callback, errback): Code Splitting for react components.

: Allows to live-edit React components while keeping them mounted and preserving their state.: Compresses your images. Ideal to use together with file or url.

: Load and compress images with imagemin.: Create multiple resized images for use with srcset and CSS media queries

: Compresses SVG images using library: Like style-loader but for SVG: it creates a single SVG sprite from a set of images, appends it to DOM and returns relative symbol url to be used with svg’s <use>.

: Inlines SVG files, converting all of its nodes to paths. Useful for line art animations in React components.: Automatically require any resources related to the required one

: Process HTML & CSS with preprocessor of choice and require() Web Components like first-class modules.: Uglify contents of a module. Unlike uglify plugin you can minify with mangling only your application files and not the libraries

: Minifies HTML using : Load single-file Vue.js components as modules, with loader-support for preprocessors.

Serialize module exports as JSON. Cache generated static data as JSON at build time. Convert files and directories to zip. Great with file.

Compresses large strings inline using lz-string, and decompresses them at runtime Get your modernizr build bundled with webpack

Pull assets from s3 based on filename, path, and desired environment.

fileurlextractworkershared-worker Shared Workersserviceworker Service Workersbundlepromiseasync-modulereact-proxyreact-hotimageimgresponsivesvgo svgosvg-spriteline-artbaggagepolymeruglifyhtml-minify minimizevuetojsonzip-itlzstringmodernizrs3

dialects: Loads coffee-script like JavaScript

: Loads coffee-script with JSX like JavaScript: Loads coffee-script like JavaScript

: Like json, but not so strict.: Loads ES6 modules. (old)

: Transpile ES6 code using .: Turn ES6 code into vanilla ES5 using .

: Use ES6 generators via Facebook’s module.: Loads LiveScript like JavaScript

: Use sweetjs macros.: Use future JavaScript features with .

: Loads TypeScript like JavaScript.: Loads TypeScript like JavaScript.

: Loads TypeScript like JavaScript with watching support. Works with TypeScript 1.5-alfa: Loads TypeScript like JavaScript. Supports watch mode and source maps. Works with TypeScript 1.5, 1.6, and nightly builds of TypeScript 1.7 and 1.8.

: Loads like JavaScript.: Loads (an Objective-C like language) files and compiles them to plain JavaScript.

: Loads files and compiles them to plain JavaScript.: Loads syntax and compiles to JavaScript.: Loads modules and compiles them to JavaScript.

: Loads files and compiles them to JavaScript.

coffeecoffee-jsxcoffee-reduxjson5es6esnext esnextbabel Babelregenerator Regeneratorlivescriptsweetjstraceur Traceurtstypescriptawesome-typescriptwebpack-typescriptpurs PureScriptoj OJelm-webpack Elmmiel Mielwisp Wispsibilant Sibilant

templating: Exports HTML as string, require references to static resources.: Exports HTML in a DOM element container.

: Load RiotJS tags and convert them to javascript.: Loads jade template and returns a function

: Loads jade template and returns generated HTML: Uses jade templates for React rendering instead of JSX

: Use jade templates to produce hyperscript output: Loads any template with consolidate.js and returns generated HTML

: Loads handlebars template and returns a function: Loads handlebars template and returns a function (alternative)

: Loads dust template and returns a function: Pre-compiles Ractive templates for interactive DOM manipulation

: Transform jsx code for to js code.: Loads react-template and returns a function

: Compiles to Handlebars.js: Loads EJS ( ( templating engine) template and returns a pre-compiled function

: Loads templates and returns generated HTML.: Pre-compiles Mustache templates with and returns a function

: Converts YAML to JSON: Extracts YAML frontmatter

: Compiles Markdown to HTML: Compiles Markdown to HTML using the Remarkable parser

: Compiles Markdown to HTML using the markdown-it parser: Compiles Markdown to HTML using the markdown-it-attrs parser that allows you to set classes, identifiers and attributes to your markdown.

: Puts HTML partials in the Angular’s $templateCache: Bundles your AngularJS templates and Pre-loads the template cache.

: Compiles haml-coffee templates (.hamlc) and returns a function.: Renders haml-coffee templates (.html.hamlc) and returns a string.

: Precompiles nunjucks and jinja2 templates: Precompiles nunjucks templates

: Compiles Google Closure templates and returns the namespace with render functions: Pre-compiles php smarty templates and returns a function

: Use ES6 template strings for html templates: Compile templates

: Load , a template-engine that is widely used in China.: You can use require directly in html now!

: Webpack Swig loader: Webpack Twig.js loader

htmldomriotjadejade-htmljade-reactvirtual-jade virtual-domtemplate-htmlhandlebarshandlebars-template-loaderdustractivejsx Reactreact-templatesem Emblemejs underscoreejs-html EJSmustache Hogan.jsyamlfront-mattermarkdownremarkablemarkdown-itmarkdownattrsng-cachengtemplatehamlchamljinjanunjuckssoysmartytemplate-stringect ectjstmodjs art-templatelayoutswigtwig

styling: Loads a configuration file for Twitter Bootstrap integration using Less. Allows complete customisation via Less.

: Loads a configuration file for Font Awesome integration using Less. Allows complete customisation via Less.: Deprecated. See .

: Loads a configuration file for Twitter Bootstrap integration using Sass. Allows complete customization via Sass. Supports CSS modules and both Bootstrap 3 and 4.: Easy integration of font-awesome with customization via Sass.

: Add exports of a module as style to DOM: Ad-hoc replacement to style-loader adding support of isomorphic apps and critical path CSS

: Loads css file with resolved imports and returns css code: Loads and compiles a less file: Loads and compiles a scss file

: Loads and compiles a stylus file: Post-process CSS with and returns CSS code: Post-process CSS with Autoprefixer and

: Add vendor prefixes to CSS rules using values from Can I Use: Namespace your css with a given selector (for encapsulating all rules in one subset of your site)

: Create your own webfont with proper CSS on-the-fly and include it into WebPack.: Automatically bind to .

bootstrap-webpackfont-awesome-webpackbootstrap-sass bootstrapbootstrapfont-awesomestyleisomorphic-stylecsslesssassstylusrework Reworkpostcss other PostCSS pluginsautoprefixernamespace-cssfontgenclassnames css-modules classnames

translation: Loads a PO gettext file and returns JSON

: Compiles translations to ICU Message Format strings in calls: Transform React source code for use with

Compiles .po files as Angular.js module or json to be used with angular-gettext.: Extracts translation id’s and default text’s

Extracts strings for translation into a nominated .pot file.: Compiles a Gettext PO file from code source.

: The preprocessor-loader provides the ability to preprocess source files through user defined regular expressions, macros, and callback routines. All user defined logic can beapplied to line scope or source scope.

: I18n loader similar to require.js i18n plugin. The language packs support AMD/CommonJS module and can be written in .json / .js / .coffee files.

poformat-message formatMessagejsxlate jsxlateangular-gettextwebpack-angular-translate angular-translateangular-gettext-extractgettextpreprocessor

amdi18n-loader

support: do tests with mocha in browser or node.js: PostLoader to code coverage with CoverJs

: postLoader to code coverage with and : preLoader to code coverage with and

: preLoader to CoffeeScript code coverage with and : PreLoader for linting code using ESLint.: PreLoader for linting code.

: PreLoader for style checking.: Conform to code style.

: A Webpack loader for injecting code into modules via their dependencies: Allow to inject dependencies into modules: Use browserify transforms as loader.

: Use falafel AST transforms as a loader.: Loads an image and returns its dimensions and type

: PreLoader for linting code using CSSLint: PreLoader for linting .

: PreLoader for linting TypeScript using : Output a stylesheet analysis report using .

: Inject some codes for profiling using .: Uses AST to find and remove unused dependencies in AMD modules using .

: A loader to generate JSON asset manifests to pass to preloading systems.: Use in tandem with gulp-rev to replace assets from rev-manifest. Test your html templates (for example) for analytics.

Preloader for linting SASS and SCSS with stylelint

mochacoverjsistanbul-instrumenter Istanbul karma-webpack karma-coverageisparta-instrumenter Isparta karma-webpack douglasduteil/karma-coverage#nextibrik-instrumenter Ibrik karma-webpack douglasduteil/karma-coverageeslintjshintjscsstandard standardinjectinjectabletransformfalafelimage-sizecsslintcoffeelint CoffeeScripttslint TSLintparker parkersjsp node-sjspamdcheck amdextractmanifestgulp-revhtml-teststylelint

Nie ma loadera do ...? Napiszmy go

module.exports = function(source) console.log(source); return source; ;

PLUGINY

function MyPlugin()

MyPlugin.prototype.apply = function(compiler) compiler.plugin('emit', function(compilation, callback) compilation.chunks.forEach(function(chunk) chunk.modules.forEach(function(module) module.fileDependencies.forEach(function(filepath) ); );

chunk.files.forEach(function(filename) var source = compilation.assets[filename].source(); ); ); callback(); ); ;

module.exports = MyPlugin;

DedupePlugin, OccurrenceOrderPlugin, UglifyJsPlugin,CommonsChunkPlugin...

WEBPACK DEV SERVER &

HOT MODULE REPLACEMENT

var path = require('path'); var webpack = require('webpack');

module.exports = devtool: 'eval', entry: [ 'webpack­dev­server/client?http://localhost:3000', 'webpack/hot/only­dev­server', './src/index' ], output: path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/static/' ,

plugins: [ new webpack.HotModuleReplacementPlugin() ], module: loaders: [ test: /\.js$/, loaders: ['react­hot', 'babel'], include: path.join(__dirname, 'src') ] ;

var webpack = require('webpack'); var WebpackDevServer = require('webpack­dev­server'); var config = require('./webpack.config');

new WebpackDevServer(webpack(config), publicPath: config.output.publicPath, hot: true, historyApiFallback: true ).listen(3000, 'localhost', function (err, result) if (err) return console.log(err);

console.log('Listening at http://localhost:3000/'); );

PSST... Tu masz słabo zooptymalizowane...

https://webpack.github.io/analyse/

webpack ­p ­j > output.json

PYTANIA?

DZIĘKI!