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.
Related
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
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.
I am currently using require.js for development so I can iterate quickly (change a file, refresh page, no build step in between), but I use webpack as a build tool since it is superior to r.js. I would like to get rid of require.js entirely and use webpack as a script loader in development. I know that's exactly what webpack dev server is for, but I specifically don't want to use it.
Ideally I would just include some kind of webpack loader in <script>, point it to my webpack.js build config, and let it do the job.
If you don't want to use webpack-dev-server, you could use webpack's watch functionality to keep building your script as you make changes. That will give you the workflow you're looking for. In the index.html, you'll be including your bundle only and no loader.
http://webpack.github.io/docs/tutorials/getting-started/#watch-mode
The Google App Engine Launcher has a nice little "Deploy" button that will push my changes to prod. However, I'd like to be able to minify/obfuscate my JavaScript before deploying.
I've read about several tools that can do this: Google Closure Compiler, Uglify.js, YUI Compressor. Of course, I could do this manually before deploying, but I'd much rather be able to have this run automatically.
Is there a way to hook into App Engine's deploy process, and run a minification/obfuscation task on my JavaScript? If not, any suggestions on other approaches?
As already mentioned minifying and obfuscating the code depends on the specific setup of your app and has to be done before deploying on App Engine.
That was one of the main reasons that I started the gae-init project. Among other things it has a custom script that combines and minifies all the static files (JS/CSS) before deploying, while when running locally keeping them as they are.
Not sure if there's a way to hook to "App Engine Launcher" but all it does is run a appcfg.py update myapp/ command where myapp/ is your app directory. You could simply create your own shell/batch file where you first minify the files and then deploy them by running the command above.
Also, take a look at Google's Pagespeed service that comes with paid App Engine projects where css/js/etc is minified automatically on Google's servers.
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.