webpack exclude property vs webpack-node-externals package

Question

In webpack server config file,

module: {
    rules: [
      {
        test: /\.js?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
      }
    ]
  }

exclude means do not compile those directories, in this case it is only node_modules. However there is also webpack-node-externals package.

const nodeWebExternals = require("webpack-node-externals");
  externals: [nodeWebExternals()],

externals property inside module.exports object is going to tell webpack not to bundle any libraries into our output bundle on the server if that library exists inside the node-modules folder.

What is the difference between those two?

Answer 1

The exclude option tells to babel-loader not to transform (modern syntax to es5) inside node_modules folder. Without externals part, webpack will not transform the syntax but will bundle each node_module that is in use to the final bundle.

Usually when bundle server code, there is no need to bundle node_modules because it is exists in the server as a folder, therefore, you are telling webpack to mark those modules as externals, it will generate a regular node require to the module instead of the modules code.