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
)?
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
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.
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:
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 ).
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With