babel-plugin-webpack-loaders

babel-plugin-webpack-loaders

This babel 6 plugin allows you to use webpack loaders in babel. It's now easy to run universal apps on the server without additional build steps and to create libraries as usual with babel src --out-dir lib command. It just replaces require - import statements with webpack loaders results. Look at babel build output diff to get the idea.

For now this plugin is at alpha quality and tested on webpack loaders I use in my projects. These loaders are file-loader, url-loader, css-loader, style-loader, sass-loader, postcss-loader. Plugin supports all webpack features like loaders chaining, webpack plugins, and all loaders params. It's easy because this plugin just uses webpack.

There are three examples here:

• runtime css-modules example with simple webpack config, run it with npm run example-run

• library example with multi loaders-plugins webpack config, build it with npm run example-build and execute with node build/myCoolLibrary/myCoolLibrary.js, assets and code will be placed at ./build/myCoolLibrary folder.

  Here is output diff of this library example build without and with current plugin.

• minimal-example-standalone-repo

How it works

Look at minimal-example

• You need to create webpack config file.

• You need add to .babelrc next lines

• Now you can run next javascript file

  // example.js
  import css from './example.css';
  console.log('css-modules result:', css);
  

  with command NODE_ENV=EXAMPLE ./node_modules/.bin/babel-node ./example.js and you get the console output

  css-modules result: { main: 'example__main--zYOjd', item: 'example__item--W9XoN' }
  

• Here I placed output diff of this babel library build without and with plugin. As you can see plugin just replaces require with loaders results. All loaders and plugins applied to generated assets

Install

npm install --save-dev babel-cli babel-plugin-webpack-loaders

Examples

webpack configs, examples, .babelrc example, tests, minimal-example-repo

you can test local examples just cloning this repo and running next commands

npm install
# example above
npm run example-run
# library example - build library with a lot of modules
npm run example-build
# and now you can use your library using just node
node build/myCoolLibrary/myCoolLibrary.js
# test sources are also good examples
npm run test

Why

The source of inspiration of this plugin is babel-plugin-css-modules-transform

• But I love to write css with sass
• I just like webpack and its loaders (chaining, plugins, settings).
• I want to opensource an UI library which heavily uses css-modules + sass and other webpack loaders. Library contains of many small modules and every module must be available to users independently like lodash/blabla/blublu. Now I can replace heavy build file with this plugin and just one command babel src --out-dir lib

How plugin works internally

Plugin tests all require pathes with test regexps from webpack config loaders,

• for each successful test plugin synchronously executes webpack,

• using babel-parse plugin parses webpack output,

• plugin replaces require ast with parse ast output.

Verbose mode in config

By default babel caches compiled files, if you need to view webpack stdout output, run commands with BABEL_DISABLE_CACHE=1 prefix

Thanks to

Felix Kling and his astexplorer

James Kyle and his babel-plugin-handbook

Michal Kvasničák and his babel-plugin-css-modules-transform