1 | [![Travis CI](https://travis-ci.org/istarkov/babel-plugin-webpack-loaders.svg?branch=master)](https://travis-ci.org/istarkov/babel-plugin-webpack-loaders)
|
2 | [![Appveyor](https://ci.appveyor.com/api/projects/status/r4rctajjme24wl0q?svg=true)](https://ci.appveyor.com/project/istarkov/babel-plugin-webpack-loaders)
|
3 |
|
4 | # babel-plugin-webpack-loaders
|
5 |
|
6 | This babel 6 plugin allows you to use webpack loaders in babel.
|
7 | 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.
|
8 | It just replaces `require - import` statements with `webpack loaders` results. Look at babel build output [diff](https://github.com/istarkov/babel-plugin-webpack-loaders/commit/2a7a6d1e61ea3d052b34afd5c3abc46f075d277c#diff-4) to get the idea.
|
9 |
|
10 | For now this plugin is at alpha quality and tested on webpack loaders I use in my projects.
|
11 | These loaders are `file-loader`, `url-loader`, `css-loader`, `style-loader`, `sass-loader`, `postcss-loader`.
|
12 | Plugin supports all webpack features like loaders chaining, webpack plugins, and all loaders params. It's easy because this plugin just uses webpack.
|
13 |
|
14 | There are three examples here:
|
15 |
|
16 | - [runtime css-modules example](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/examples/runExample/run.js) with simple [webpack config](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/examples_webpack_configs/run.webpack.config.js),
|
17 | run it with `npm run example-run`
|
18 |
|
19 | - [library example](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/examples/myCoolLibrary/myCoolLibrary.js) with [multi loaders-plugins webpack config](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/examples_webpack_configs/lib.webpack.config.js),
|
20 | 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.
|
21 |
|
22 | Here is [output diff](https://github.com/istarkov/babel-plugin-webpack-loaders/commit/2a7a6d1e61ea3d052b34afd5c3abc46f075d277c#diff-4) of this [library example](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/examples/myCoolLibrary/myCoolLibrary.js) build without and with current plugin.
|
23 |
|
24 | - [minimal-example-standalone-repo](https://github.com/istarkov/minimal-example-for-babel-plugin-webpack-loaders)
|
25 |
|
26 | ## Warning
|
27 |
|
28 | **Do not run this plugin as part of webpack frontend configuration. This plugin is intended only for backend compilation.**
|
29 |
|
30 |
|
31 | # How it works
|
32 |
|
33 | Look at [minimal-example](https://github.com/istarkov/minimal-example-for-babel-plugin-webpack-loaders)
|
34 |
|
35 | - You need to create [webpack config](https://github.com/istarkov/minimal-example-for-babel-plugin-webpack-loaders/blob/master/webpack.config.js) file.
|
36 |
|
37 | - You need add to `.babelrc` [next lines](https://github.com/istarkov/minimal-example-for-babel-plugin-webpack-loaders/blob/master/.babelrc#L1-L16)
|
38 |
|
39 | - Now you can run [next javascript file](https://github.com/istarkov/minimal-example-for-babel-plugin-webpack-loaders/blob/master/example.js)
|
40 |
|
41 | ```javascript
|
42 | // example.js
|
43 | import css from './example.css';
|
44 | console.log('css-modules result:', css);
|
45 | ```
|
46 |
|
47 | with command `NODE_ENV=EXAMPLE ./node_modules/.bin/babel-node ./example.js` and you get the console output
|
48 |
|
49 | ```javascript
|
50 | css-modules result: { main: 'example__main--zYOjd', item: 'example__item--W9XoN' }
|
51 | ```
|
52 |
|
53 | - Here I placed [output diff](https://github.com/istarkov/babel-plugin-webpack-loaders/commit/2a7a6d1e61ea3d052b34afd5c3abc46f075d277c#diff-4)
|
54 | of this [babel library](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/examples/myCoolLibrary/myCoolLibrary.js) build without and with plugin.
|
55 | As you can see plugin just replaces require with loaders results. [All loaders](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/example-output/build/myCoolLibrary/assets/myCoolStyle.css#L12) and [plugins](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/example-output/build/myCoolLibrary/assets/myCoolStyle.css#L4) applied to generated assets
|
56 |
|
57 |
|
58 | # Install
|
59 |
|
60 | ```shell
|
61 | npm install --save-dev babel-cli babel-plugin-webpack-loaders
|
62 | ```
|
63 |
|
64 | # Examples
|
65 |
|
66 | [webpack configs](https://github.com/istarkov/babel-plugin-webpack-loaders/tree/master/examples_webpack_configs),
|
67 | [examples](https://github.com/istarkov/babel-plugin-webpack-loaders/tree/master/examples),
|
68 | [.babelrc example](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/.babelrc),
|
69 | [tests](https://github.com/istarkov/babel-plugin-webpack-loaders/tree/master/test),
|
70 | [minimal-example-repo](https://github.com/istarkov/minimal-example-for-babel-plugin-webpack-loaders)
|
71 |
|
72 | you can test local examples just cloning this repo and running next commands
|
73 |
|
74 | ```shell
|
75 | npm install
|
76 | # example above
|
77 | npm run example-run
|
78 | # library example - build library with a lot of modules
|
79 | npm run example-build
|
80 | # and now you can use your library using just node
|
81 | node build/myCoolLibrary/myCoolLibrary.js
|
82 | # test sources are also good examples
|
83 | npm run test
|
84 | ```
|
85 |
|
86 | # Why
|
87 |
|
88 | The source of inspiration of this plugin is [babel-plugin-css-modules-transform](https://github.com/michalkvasnicak/babel-plugin-css-modules-transform)
|
89 |
|
90 | - But I love to write css with sass
|
91 | - I just like webpack and its loaders (chaining, plugins, settings).
|
92 | - I want to opensource an UI library which heavily uses css-modules + sass and other webpack loaders.
|
93 | Library contains of many small modules and every module must be available to users independently like `lodash/blabla/blublu`.
|
94 | Now I can replace heavy build file with this plugin and just one command `babel src --out-dir lib`
|
95 |
|
96 | # How plugin works internally
|
97 |
|
98 | Plugin tests all `require` pathes with [test regexps](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/src/plugin.js#L91) from webpack config loaders,
|
99 |
|
100 | - for each successful test plugin [synchronously executes webpack](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/src/runWebPackSync.js#L15-L16),
|
101 |
|
102 | - using babel-parse plugin [parses webpack output](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/src/plugin.js#L7),
|
103 |
|
104 | - plugin [replaces](https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/src/plugin.js#L104) require ast with parse ast output.
|
105 |
|
106 | # Verbose mode in config
|
107 |
|
108 | By default babel caches compiled files, if you need to view webpack stdout output, run commands with
|
109 | `BABEL_DISABLE_CACHE=1` prefix
|
110 |
|
111 | # Thanks to
|
112 |
|
113 | [Felix Kling](https://github.com/fkling) and his [astexplorer](https://github.com/fkling/astexplorer)
|
114 |
|
115 | [James Kyle](https://github.com/thejameskyle) and his [babel-plugin-handbook](https://github.com/thejameskyle/babel-plugin-handbook)
|
116 |
|
117 | [Michal Kvasničák](https://github.com/michalkvasnicak) and his [babel-plugin-css-modules-transform](https://github.com/michalkvasnicak/babel-plugin-css-modules-transform)
|