I've just updated to webpack 5
.
This is my webpack.config.ts
:
import * as path from "path";
import * as webpack from "webpack";
const config: webpack.Configuration = {
mode: "production",
devtool: false,
output: {
filename: "[name].[contenthash:5].js",
path: path.resolve(__dirname, "public"),
publicPath: "/"
},
entry: {
app: "./src/index.tsx"
},
module: {
rules:[{
test: /\.(js|jsx|ts|tsx)$/,
include: path.resolve(__dirname, "src"),
use: ["babel-loader"]
}]
},
plugins: [
new HtmlWebpackPlugin({ ... })
],
optimization: {
moduleIds: "deterministic",
runtimeChunk: "single",
splitChunks: {
chunks: "all",
cacheGroups: {
defaultVendors: {
filename: `vendors.[contenthash:5].js`
}
}
}
}
}
It's pretty standard.
This is the bundle output:
Everything makes sense. This is what we have:
runtime
chunk. From the runtimeChunk: "single"
optionvendors
chunk. From the defaultVendors
cacheGroupapp
chunk, from the app: "./src/index.tsx"
entrypointBut there are other logs that I don't understand:
orphan modules
Why is webpack
detecting so many modules as orphan? My total amount of files in my src
folder is around ~500. There are probably some lost files in there, but I'm pretty sure most of them should not be considered orphan by any means, since they are used across the app code.
This is their definition for orphan modules:
And I'm pretty sure most of my src
files are included in the app
chunk. So how could they be considered orphan? Can I inspect or log which modules are being considered orphan?
I'm not sure if this started on webpack 5 or not. Don't remember if webpack 4 logs also had this. Should I worry about this? It's not triggering any warnings
, but it gets logged like that.
I have been curious about orphan modules, as I was analyzing my webpack stats. I noticed that concatenated modules are always considered orphan modules. If you look in webpack bundle analyzer and see concatenated modules, those will be your orphan modules most likely. I'm not sure if this is a bug or not in webpack.