Webpack for back-end?

I was just wondering, I started using Webpack for a new project and so far it's working fine. I almost would say I like it better than Grunt, which I used before. But now I'm quite confused how and or I should use it with my Express back-end?

See, I'm creating one app with a front-end (ReactJS) and a back-end (ExpressJS). The app will be published on Heroku. Now it seems like I should use Webpack with ExpressJS as well to get the app up and running with one single command (front-end and back-end).

But the guy who wrote this blogpost http://jlongster.com/Backend-Apps-with-Webpack--Part-I seems to use Webpack for bundling all back-end js files together, which is in my opinion really not necessary. Why should I bundle my back-end files? I think I just want to run the back-end, watch my back-end files for changes and use the rest of Webpack's power just for the front-end.

How do you guys bundle the front-end but at the same time run the back-end nodejs part? Or is there any good reason to bundle back-end files with Webpack?

Solution 1:

Why to use webpack on node backend

If we are talking about react and node app you can build isomorphic react app. And if you are using import ES6 Modules in react app on client side it's ok - they are bundled by webpack on the client side.

But the problem is on server when you are using the same react modules since node doesn't support ES6 Modules. You can use require('babel/register'); in node server side but it transipile code in runtime - it's not effective. The most common way to solve this problem is pack backend by webpack (you don't need all code to be transpile by webpack - only problematic, like react stuff in this example).

The same goes with JSX.

Bundling frontend and backend at the same time

Your webpack config can have to configs in array: one for frontend and second for backend:

webpack.config.js

const common = {
    module: {
        loaders: [ /* common loaders */ ]
    },
    plugins: [ /* common plugins */ ],
    resolve: {
        extensions: ['', '.js', '.jsx'] // common extensions
    }
    // other plugins, postcss config etc. common for frontend and backend
};

const frontend = {
     entry: [
         'frontend.js'
     ],
     output: {
        filename: 'frontend-output.js'
     }
     // other loaders, plugins etc. specific for frontend
};

const backend = {
     entry: [
         'backend.js'
     ],
     output: {
        filename: 'backend-output.js'
     },
     target: 'node',
     externals: // specify for example node_modules to be not bundled
     // other loaders, plugins etc. specific for backend
};

module.exports = [
    Object.assign({} , common, frontend),
    Object.assign({} , common, backend)
];

If you start this config with webpack --watch it will in parallel build your two files. When you edit frontend specific code only frontend-output.js will be generated, the same is for backend-output.js. The best part is when you edit isomorphic react part - webpack will build both files at once.

You can find in this tutorial explanation when to use webpack for node (in chapter 4).

Solution 2:

This answer is probably outdated by now since node now has better support for ES modules

There's only a couple of aspects I can redeem the need to use webpack for backend code.

ES modules (import)

import has only experimental support in node (at least since node 8 up to 15). But you don't need to use webpack for them work in node. Just use esm which is very lightweight and has no build step.

Linting

Just use eslint, no need to use webpack.

Hot reloading/restart

You can use nodemon for this. It's not hot reloading but I think it's way easier to deal with. I wished I could refer to a more lightweight project than nodemon, but it does do the trick.

The blog post you shared (which is dated by now) uses webpack for having hot reloading. I think that's an overkill, opens a can of worms because now you have to deal with webpack config issues and hot reloading can also lead to unexpected behaviour.

The benefits we get from using tools like webpack on the frontend don't really translate to backend.

The other reasons why we bundle files in frontend is so browsers can download them in an optimal way, in optimal chunks, with cache busting, minified. There's no need for any of these in the backend.

Old (and terrible, but maybe useful) answer

You can use webpack-node-externals, from the readme:

npm install webpack-node-externals --save-dev

In your webpack.config.js:

var nodeExternals = require('webpack-node-externals');

module.exports = {
    ...
    target: 'node', // in order to ignore built-in modules like path, fs, etc.
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
    ...
};