I am concerned it is compiling my node_modules despite me asking to exclude it. How can I look and see what it is actually doing. The output in the console looks like gibberish. Is there a way to configure it to an output I can read.
This is a react/redux project. When I install react+ using npm install react react-redux react-dom, I assume this is in a readable form that webpack does not need to compile, hence the excluding of node_modules.
DEBUG: Webpack path: /Users/c/top/framework/client
asset bundle.js 130 KiB [compared for emit] [minimized] (name: main) 2 related assets
orphan modules 55.3 KiB [orphan] 30 modules
cacheable modules 187 KiB
modules by path ./node_modules/hoist-non-react-statics/ 5.36 KiB 3 modules
modules by path ./node_modules/react/ 6.48 KiB 2 modules
modules by path ./node_modules/react-dom/ 119 KiB 2 modules
modules by path ./node_modules/scheduler/ 4.91 KiB
./node_modules/scheduler/index.js 198 bytes [built] [code generated]
./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB [built] [code generated]
modules by path ./node_modules/react-is/ 2.48 KiB
./node_modules/react-is/index.js 196 bytes [built] [code generated]
./node_modules/react-is/cjs/react-is.production.min.js 2.29 KiB [built] [code generated]
./client/index.jsx + 20 modules 46.1 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
webpack 5.69.0 compiled successfully in 3788 ms
Relevant part of config file
const input = `${ PATH_IN }/index.jsx`;
// babel-loader handles .js and .jsx files
const jsx = {
include: PATH_IN,
test: /\.jsx?/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
};
My project consists of a single file as follows: ( index.jsx )
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
function App() {
return null;
}
ReactDOM.render(
<React.StrictMode>
<App></App>
</React.StrictMode>
, document.getElementById('app'));
Your project is not actually empty. It has 3 dependencies, and webpack will build out the dependency graph starting at index.jsx. It will than build out the dependency graph for
and each of their dependencies until all dependencies are packaged into a single file.