Create React App+Webpack打包后页面空白无控制台日志输出问题

Hey there, let's figure out why your single bundle isn't behaving as expected—here are the most likely issues and fixes to test out:

1. Double-check your webpack config's entry point #

CRA's yarn build outputs its main app code to build/static/js/main.*.js (the hashed file in the build folder). If your webpack config is pointing to the wrong file (like an empty or unrelated build artifact), your bundle won't include your app logic or the console.log you added. Instead of hardcoding the entry path, use a wildcard like build/static/js/main*.js to avoid issues with hash changes between builds.

2. Verify webpack's output settings #

When bundling a standalone React app for the browser, make sure your webpack config has the right libraryTarget set. For immediate execution in the browser, libraryTarget: 'umd' is a safe bet—it ensures your bundle doesn't get trapped in an isolated module scope that prevents it from running. Also, confirm the output path and filename match exactly what you're linking in your HTML.

3. Check if your app's mount logic is intact #

CRA's default index.js uses ReactDOM to mount your app to a <div id="root"> element. If your webpack bundling is accidentally tree-shaking or stripping out this mount code, your app won't render, and even your top-level console.log might not fire if it's wrapped in module code that never executes. Open the minified bundle in your browser's dev tools (use the "pretty print" button) and search for ReactDOM.render or createRoot to confirm this logic is present.

4. Make sure your HTML has the root element #

Your React app needs a target element to mount to. If your test HTML doesn't include <div id="root"></div>, React can't attach your app, so the page stays blank and any component-based code (including your console.log if it's in a component) won't run.

5. Check for hidden runtime errors #

Just because the bundle loads in the Network tab doesn't mean there aren't runtime errors blocking execution. Open your browser's Console tab and look for any errors related to missing dependencies (like React or ReactDOM) or invalid code. For example, if your webpack config excluded core libraries, the bundle will fail to run silently.

6. Confirm your script tag's type attribute #

If your webpack config outputs an ES module (common in newer setups), you need to add type="module" to your script tag:

<script type="module" src="dist/build/bundle.min.js"></script>

Without this attribute, the browser might not parse or execute the module code, leaving your console.log untriggered.

内容的提问来源于stack exchange，提问作者nexus