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?


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:


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: [
     output: {
        filename: 'frontend-output.js'
     // other loaders, plugins etc. specific for frontend

const backend = {
     entry: [
     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).

  • Well I'm trying to build an isomophic app ;) The thing is that before I used webpack, I used Grunt, which was quite easy to use a combination of browserify, grunt-nodemon and grunt-contrib-watch to run the front-end and back-end code with a single command. And at the same time, having a watcher on front- AND back-end code. I'm experiencing this is harder using webpack, while having a single application folder (with subfolders) with express and react files. I need webpack to only watch the back-end code, and watch and bundle the front-end. I'm experiencing this isn't that easy. – Erik van de Ven Jun 20 '16 at 11:13
  • Also because If I'm looking for different articles online, I came across some blogs like jlongster.com/Backend-Apps-with-Webpack--Part-I, who bundles the back-end code as well, which is not what I want :) – Erik van de Ven Jun 20 '16 at 11:15
  • @ErikvandeVen you ask for a webpack solution. Every one of us has got the most comfortable build tools stack. I found that only webpack is great for isomorphic react apps. – Everettss Jun 20 '16 at 12:07
  • // specify for example node_modules to be not bundled Does this mean this should be an array of every module in node_modules that isn't a dependency of backend code..or a dependency of one of their dependencies, etc etc.. That can't be right.. Can you explain further? Thanks – 1252748 Aug 18 '17 at 17:47
  • 1
    @1252748 in externals you should specify modules which are specific for node environment like for example fs (webpack will fail to compile this modules). You can read about this here webpack.js.org/configuration/externals For most of the time this plugin npmjs.com/package/webpack-node-externals will cover all problematic node modules. Use it like this: externals: [require('webpack-node-externals')()]. – Everettss Aug 19 '17 at 17:57

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

Your Answer

