Understanding React Webpack bundles - javascript

So I have a few questions regarding how Webpack serves its bundles. I have a React application created using create-react-app. When I inspect the JS bundles in Chrome dev tools, I can see all the individual js files I created in my React app (eg. App.js). But I also see other bundles like bundle.js, 0.chunck.js and main.js. However, only the bundle files are shown in network tab. This indicates that only the Webpack bundles were actually downloaded.
So the question is, how were these other individual files get delivered to the browser? Is my application using the bundle or these separate files? I believe that the individual JS files are only available in 'development' mode of Webpack, and not in 'production' mode, but I would still like to understand this.
Further, is the React source code a part of these bundles or is React globally exposed? If React is part of the bundles, then how does React dev tools recognize that React is present on the page, given that all Webpack bundles are isolated from all other code?

As you mentioned in your question, for some reason you are still able to debug your bundled and probably minified code as if it has not been bundled and minified. The reason this is possible is called:
Source maps
Source maps are files, which map code in the bundled file to the locations of the code in unbundled files. Those source maps are generated by your bundler (if enabled) while bundling your code. They are shipped with the code on requesting it and are used by your browser, so that you can debug your own unbundled code in the browser dev tools. For more details, there is a good introduction into source maps here.
Regarding your second question: React dev tools will recognize React, if window.__REACT_DEVTOOLS_GLOBAL_HOOK__ is set. This property is a special object enabling communication with the developer tools backend in the browser or standalone app. As this is a member on the global window object, it is accessible everywhere and therefore not bound to a single bundle.

Related

Typescript in `file://` environment

Recently I just picked up Typescript for a personal project. Since the project is designed to be ran locally (explicitly file://), I won't be able to use import/export features due to CORS restrictions. Aware of another similarly written question but lacking the specific context on my use case, I pose these questions:
How does one tell Typescript that all (or at least certain) scripts are imported to HTML via <script type="text/javascript" src="./source.js">?
Does Typescript's tsc build projects with this in mind? Also, does it edit existing HTML files to take this into consideration too? If not, are there tools to automate this process as well?
I don't want to bundle them like webpack or tsc-bundle does, since a secondary objective to this project is to keep all .js files human-readable just as much as the .ts files do.
Building Typescript using tsc -p tsconfig.json, configured to "target" : "ES2015" and "module" : "None", only outputs their respective .js files and doesn't update any of the HTML's <script> includes. Am currently maintaining the html file by manually inserting and juggling any new modules that emerges over the course of development.
My current load order in index.html is as follows:
index.js handles UI controls and loads first.
The remaining pseudo-modules .js files loads in-between, since these only define classes and doesn't perform any operations, so I figured it's safe to load them here.
main.js handles all the code from javascript "modules" and loads last.
My main concern is that my in-between modules might load out of order due to human error.
Edit: Running a local webserver is out of the question too, since the project is meant to target audience with limited technical knowledge, with the index.html file the only file they need to run in their browser.

How to add Webpack to a project for strictly minification?

I am a dev on a web application that consists of Java Server Pages which act as the HTML, a Java backend, and Javascript front-end files. I have been tasked with looking into adding Webpack to the project, with the goal of only using it to minify Javascript files at first (eventually we will use more of Webpack's features of course). I have tried doing research via Google into Webpack minification, but I am having trouble finding anything detailing how to use it for just minification, instead of bundling the project files.
Does anyone know how to use Webpack for strictly Javscript minification?
Webpack out of the box is anticipating on processing JS and will run minification on production builds by default.
https://webpack.js.org/configuration/mode/ (different build modes)
Assuming you are already past configuring a JS entry file to consume all your JS files:
https://webpack.js.org/configuration/entry-context/#entry
AND configured a loader on how to handle each JS file imported in your entry file appropriately.
(Feels like you want asset/resource. Pay close attention to asset modules type and generator options)
https://webpack.js.org/guides/asset-modules/
The settings for minification on a production build are what is known as the optimization.minimize configuration of your webpack.
https://webpack.js.org/configuration/optimization/#optimizationminimize
With Webpack5, further options around the minification engine has been exposed and is known as optimization.minimizer configuration options:
https://webpack.js.org/configuration/optimization/#optimizationminimizer

How to disable bundling in Webpack for development?

In my web app I was using RequireJS to asynchronously load my javascript files on demand. This worked well for dev - when debugging my app I could see which script is dependent on which and order in which they were loaded. This simplified debugging.
Later I switched to Webpack as it is much easier in configuration and easier to maintain. So Webpack now generates for me nice bundles containing my javascript code. This works perfectly well but what I'd like to have is an imitation of my previous RequireJS configuration for dev time.
When I am developing my app I want Webpack to generate some simple entry point (just like in RequireJS) which would load my javascript files one by one through their "require" references.
At the same time I still want that Webpack performed normal bundling when I deploy my app to a server.
Is this possible to achieve?
Enable Devtools in webpack.config.js to control and generate source maps (Source Maps enhance debugging process).
webpack.config.js
devtool: "#inline-source-map",
Chrome Debugger View
Nope, that's not possible. But have you tried the devtool-option? It maps back your original files in your devtools so you should see no difference whether the modules were in different files or just all in one.

Does web essentials offer a way to use the bundled js file in production but individual js files in development?

The Setup:
I have a large SPA app using many JavaScript files that are bundled using Web Essentials bundling in Visual Studio 2013. I then include the minified js files generated by Web Essentials on my HTML page. This application does not use ASP.NET
The problem:
I would like to be able to distribute the HTML page with a single minified script referenced for production but the individual unminified scripts for development.
Reasons:
The minified scripts even with the map files make it difficult to debug. Variable and parameter names have been minified and thus the debugger does not match the source. Additionally, since everything is in one file, its hard to look at for development.
Current solution:
I have a grunt task that goes into my html file and modifies it such that the <script> tags are replaced. This has the con of growing with every file I add to the page.
Does web essentials offer a better solution than what I am currently doing that I might have simply overlooked?
You are mixing the bundling tool with the reference implementation.
Web Essentials 2013 builds bundles of compressed (minified) JavaScript, CSS, LESS, SASS and image files. Web Essentials should create the minified bundle regardless whether you are in Debug mode.
You are looking for a way to selectively reference minfied files in Release mode and originals in Debug. That may mean rather involved Razor coding to check for release version and render reference calls.
A better solution is to use ASP.NET Bundling and Minification.
It's easy to debug your JavaScript in a development environment (where the compilation Element in the Web.config file is set to debug="true" ) because the JavaScript files are not bundled or minified when debug="true"
The minified bundle will still exist if debug="true" in your Web.config. But at run-time, the framework will reference the originals files instead of the minified. Your Web.config is now responsible for maintaining which version of your assets are referenced.
Web Essential bundles are passive assets. There is no functionality in Web Essentials to distinguish between Release and Debug mode because that is a run-time action.
Note: Web Essentials 2015.0 has removed bundling and minification.
Important!
Web Essentials 2015 no longer contains features for bundling and
minifying of JS, CSS and HTML files as well as compiling LESS, Scss
and CoffeeScript files. Those features have been moved to their own
separate extensions that improves the features greatly
The common practice is to use the ASP.NET Bundler. This is another reason to get away from bundling with Web Essentials.
i ma not sure if Web-essentials can handle that scenario though
As per my current project experience below are the things i use to debug the code locally while development-
For local debugging if you are using the ASP.NET bundling feature and must have specified the file references in the BundleConfig.cs. You can enable the browser to Load each file as is by Setting the flag BundleTable.EnableOptimizations=true; in the Global.asax file. And we load the single bundle file to work on local environment
For Production we use the minified versions of the file references.
eg in your HTML you can have a check like this
#if(local){
#Scripts.Render("~/Scripts/src/BundleName");
}
else{
//Which is an partial HTML which contains the minified file references
Html.RenderPartial("ClientTemplates/MinifiedScripts");
}
Thanks
I have just used the Bundler/Minifier from here: https://github.com/madskristensen/BundlerMinifier
To help see the unbunded and unminified JS and CSS I have created a helper to render both depending on whether the web application is running with debug enabled.
see: https://bundlerminifierhelper.codeplex.com/
Example:
#Html.Bundle("/Content/Styles/Site.min.css")
#Html.Bundle("/Scripts/Scripts.min.js")
Note: Using relative paths, including the forward slash (/)
When debugging all the input files will be rendered out to the page, and when not debugging, the supplied path will be rendered out.

Browserify: how to debug in different browser?

I am considering browserify to develop a web app in modules.
Since browserify is based on a build step to generate a bundle JS script, how can I debug original files separately and not the generated app in different browsers (also IE8 and IE9)?
NOTE:
the actual debug mode in browserify enables source maps to original files, but it is only working in Chrome.

Categories

Resources