Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

webpack to bundle code targeting node.js

I use webpack for bundling the client side and want to use it for building node/npm library. I saw I can specify the target as node for this. From the doc,

"node" Compile for usage in a node.js-like environment (use require to load chunks)

But the problem is react.js is bundled in the compile output. I want only my source files and any dependencies listed in package.json to be included. I have specified react as peerDependency, like

"peerDependencies": {
    "react": ">=0.13",
    "react-tap-event-plugin": ">=0.1.3"
  },

I also try defining react in externals expecting it may just create the symbol and not include the library itself, but it still includes react in compiled output.

 target: "node",
    externals: [{
        'react' : 'React',
    }]

so, is there a way to use webpack to bundle by server side / node code, but also to specify not to bundle some of the dependencies (which may be defined as peerDependencies or devDependencies)?

like image 272
bsr Avatar asked May 09 '15 22:05

bsr


People also ask

How to use Webpack to create a JavaScript bundle?

You use webpack to create a bundle, i.e., a single javascript (‘bundle-front.js’) containing all dependencies (bar module, React library, etc.) with ‘front.js’ as the starting point. 4. Run the javascript code in ‘bundle-front.js’ file on your web page ... ... Front-end vs. Back-end Javascript Bundling

Can Webpack compile for multiple environments or targets?

Webpack can compile for multiple environments or targets. To understand what a target is in detail, read through the targets concept page. Instructs webpack to target a specific environment.

Should you use Webpack for your NodeJS back-end?

One good reason for using Webpack for your nodejs back-end is that you are already using Webpack for your front-end, and you want to streamline your build tools. The motive for writing this article is two-fold:

How do I set the target property in a Webpack config?

To set the target property, you set the target value in your webpack config: In the example above, using node webpack will compile for usage in a Node.js-like environment (uses Node.js require to load chunks and not touch any built in modules like fs or path ).


1 Answers

James had written a 3 part series on it.

http://jlongster.com/Backend-Apps-with-Webpack--Part-I

following his code, externals were set as

{ 'babel-core': 'commonjs babel-core',
  'babel-loader': 'commonjs babel-loader',
  classnames: 'commonjs classnames',
  react: 'commonjs react',
...
}

which worked great.

like image 183
bsr Avatar answered Oct 14 '22 19:10

bsr