It’s useful when applying icon font or applying CSS animation to SVG. markup-inline-loader Inline SVG/MathML files to HTML.handlebars-loader Compiles Handlebars to HTML.posthtml-loader Loads and transforms a HTML file using PostHTML.react-markdown-loader Compiles Markdown to a React Component using the markdown-parse parser.markdown-loader Compiles Markdown to HTML.pug-loader Loads Pug and Jade templates and returns a function.html-loader Exports HTML as string, require references to static resources.elm-webpack-loader Loads Elm like JavaScript.fengari-loader Loads Lua code using fengari.coffee-loader Loads CoffeeScript like JavaScript.ts-loader Loads TypeScript 2.0+ like JavaScript.traceur-loader Loads ES2015+ code and transpiles to ES5 using Traceur.buble-loader Loads ES2015+ code and transpiles to ES5 using Bublé.esbuild-loader Loads ES2015+ code and transpiles to ES6+ using esbuild.babel-loader Loads ES2015+ code and transpiles to ES5 using Babel.cson-loader Loads and transpiles a CSON file.ref-loader Create dependencies between any files manually.val-loader Executes code as module and consider exports as JS code.Loaders are activated by using loadername! prefixes in require() statements, or are automatically applied via regex from your webpack configuration – see configuration. You can easily write your own loaders using Node.js.

This allows you to bundle any static resource way beyond JavaScript. Too cumbersome.Webpack enables use of loaders to preprocess files. Launching them manually works fine, but it requires Running Webpack Dev Server and Jekyll Concurrently node_modules/.bin/webpack-dev-server should serve your stylesheet at If you are not familiar with this configuration, please refer to my Webpack introductionĮxecuting. Style.css file, taking into account every images in the sass/ and posts/ folders. To sum up these lines, we compile every scss files in the sass/ folder into Var ExtractTextPlugin = require ( ' extract-text-webpack-plugin ' ) module.

Webpack dev server pug template