How to use Webpack loaders in a Node app?

Question

Is there a way to use Webpack loaders in a Node app / Run a Node app in a Webpack environment?

For instance I've got a webpack config that has a style-loader. In my Node app I do the following:

import style from 'style.css'

console.log(style.someClass)

I wanna run it like $ node app.js

haxpanel · Answer 1 · 2016-09-07T16:52:34.627

I've got an idea that might work, based on the Webpack NodeJS API. What if we put the code that we want to be able to use the Webpack environment (with the configured module loaders) into a module:

appModule.js:

import style from 'style.css'

console.log(style.someClass)

And require it with the following:

app.js:

import Webpack from 'webpack'
import MemoryFS from 'memory-fs'

...

webpackConfig.entry = 'appModule.js'
webpackConfig.output = 'appModule-out.js'

let compiler = Webpack(webpackConfig)
let mfs = new MemoryFS()

compiler.outputFileSystem = mfs
compiler.run(function (err, stats) {
    require(webpackConfig.output)
})

Probably it won't work because the require looks for the output on the physical FS... Can we require from the memory FS? I have not tried it yet - Any idea?

score 0 · Answer 2 · answered Jul 19 '16 at 14:09

Webpack loaders aren't transpilers or interpreters, they simple gather assets that are then handled off to something like SASS or a text concatenator; within the confines of Webpacks environment.

Thus it is not possible to reuse them in the way you want, because while you can of course import and call them (they're still just functions + classes), they don't convert CSS to JSON objects (they don't do this) as you have written in your desired example.

It looks like you just need a JS implementation of a css parser - have a look at https://github.com/reworkcss/css

I'm looking for something that enables me to run a block of code in a Webpack environment. I'm not looking for specific CSS loader, thats just an example. But it looks like the only way to run a code in a Webpack environment is to run it with Webpack: `$ webpack app.js` — haxpanel, Jul 19 '16 at 14:12

score 0 · Answer 3 · answered Jul 19 '16 at 14:34

You should be able to create a compilation targeting the node environment which you can ultimately run by simply calling node output.js and this will immediately execute the entry point module.

Be aware, in case that you're using a newer version of Node.js, that Webpack doesn't support the ES2015 module syntax, so you'll have to configure Babel for Node.js as well to transform the modules.

How to use Webpack loaders in a Node app?

3 Answers3