Develop Reference

Don't include a JS library in webpack build (with the assumption that it'll be included in a script tag)

I'm using a large library (around 1 MB) along with webpack for building. The library is just used normally - it's in package.json's dependencies, and at some point in my code I import it with an import from <lib_name> (this is in Typescript).
So right now, when I run a webpack build, the end result bundle.js contains all (or most? not sure how much webpack trims, actually) of the library's code. So even my barebones application that's only a couple lines of code and an import has that big 1MB build size.
What I would like to do is have the library not be thrown into the final build, and instead basically have in my HTML file something like this:
<script src="https://some.cdn.here/thelibrary-v0.0.0.min.js"></script>
<script src="bundle.js"></script>
In other words, the files in the build would be something like:
BEFORE:
dist/
bundle.js -- 1005 KB
AFTER:
dist/
thelibrary-v0.0.0.min.js -- 1000 KB
bundle.js -- 5 KB
Where bundle.js becomes a very small file with just my code, and it simply expects the library to be loaded beforehand. To be clear - bundle.js would still be using things from the library and would need it to run. I'm not sure if this is actually possible or not, because I don't have a good understanding of how webpack actually handles imports and stuff (especially in conjunction with uglify/minification). Is it possible to do something like this, and if so, how?

It can be done with externals.
module.exports = {
//...
externals: {
jquery: 'jQuery'// thelibrary in your case
}
};

Does Create React App provides gzip compression out of the box?

Does Create React App provides gzip compression out of the box?
Since in console output it shows below , is it enough to serve them in production , is any particular configuration required ? Please confirm if anyone is aware
File sizes after gzip:
88.96 KB build\static\js\2.67a35d8a.chunk.js
45.81 KB build\static\js\3.06562e80.chunk.js
2.17 KB build\static\js\4.2dca02a2.chunk.js
1.71 KB build\static\js\main.01ef12c5.chunk.js

No it does not. And as a matter of fact, It does not allow us to change the default configuration of the Module Bundler which it uses ( Webpack). If you want to serve gzipped compressed bundle to make your apps load faster on client side, then you can find my answer posted at https://stackoverflow.com/a/67716096/2631276

I don't believe so but it looks like you can configure this on your own in your package.json file in your postbuild script.
This post might be helpful for you.

How to use uglify js efficiently?

I am looking into using uglifyjs to minimize my webpack bundle
currently my bundle is: 1.13 MB
I have installed webpack bundle analyzer and have booted it up and seen the stats it has thrown up.
For example my basket/index.js is: stat size: 5.16kb, parsed size: 5.38kb,and gzipped size is: 1017b.
I have a couple of questions.
1. can I get this file down to the gzipped size?
2. can I just run uglifyjs --compress filename to achieve this?
3. why is the parsed size bigger than the stat size?
4. will this make an iota of difference to the bundle size/performance?

Webpack project with mutliple html / js / css files

I think that I've got how Webpack works. My problem is: Most tutorials/examples are based on a single index.html. So, how would I organize my webpack.config.js and directory structure for multiple pages?
Let's assume that I need the following things:
index.html with a css and js file
dashboard.html with a css and js file
profile.html with a css and js file
And here is what I don't get:
How would you structure your src and dist folder?
How do I have to configure Webpack? Probably with HtmlWebpackPlugin(?)
Is a single index.js file enough as entry point / How does one structure the index.js file / How do ES6 projects look in general?
A sample project would help a lot. A project with more than just an example index.html file.
Have a good day! :)

I think u can do that by convert html+js+css into web component and u can do that easily by a framework , i think Vue js give very good boilerplate full Webpack template to let u do that just start to think about the other page as a new component remember that u r using webpack to get a bundle

So you can have one watch output multiple bundle types by passing in a command line arg to build the right bundle. There can be multiple entry points in webpack but webpack is only build to output one bundle. So, to solve this issue I figured passing a command line arg to webpack is a clean way of having multiple bundle possibilities while maintaining only one config file.
To see how this can be accomplished checkout...
https://www.hipstercode.com/blog/27/

Configure webpack to allow browser debugging

I am new to webpack and I am converting an existing web application to use it.
I am using webpack to bundle and minify my JS which is great when deployed, however this makes it very challenging to debug while in developement.
Typically I use chrome's built in debugger to debug JS issues. (Or Firebug on firefox). However with webpack everything is stuffed in one file and it becomes challenging to debug using that mechanism.
Is there a way to quickly turn on and off bundeling? or turn on and off minifying?
I have looked to see if there is some script loader configuration or other setting but it does not appear ovious.
I have not yet had the time to convert everything to act like a module and use requires. So I simply use require("script!./file.js") pattern for my loading.

You can use source maps to preserve the mapping between your source code and the bundled/minified one.
Webpack provides the devtool option to enhance debugging in the developer tool just creating a source map of the bundled file for you. This option can be used from the command line or used in your webpack.config.js configuration file.
Below you can find a contrived example using the command line to generate the bundled file (bundle.js) along with the generated source map file (bundle.js.map).
$ webpack --devtool source-map ./entry.js bundle.js
Hash: b13b8d9e3292806f8563
Version: webpack 1.12.2
Time: 90ms
Asset Size Chunks Chunk Names
bundle.js 1.74 kB 0 [emitted] main
bundle.js.map 1.89 kB 0 [emitted] main
[0] ./entry.js 85 bytes {0} [built]
[1] ./hello.js 59 bytes {0} [built]
index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
entry.js
var hello = require('./hello.js');
document.body.innerHTML += 'It works ' + hello();
hello.js
module.exports = function () {
return 'Hello world!';
};
If you open index.html in your browser (I use Chrome but I think it is also supported in other browsers), you will see in the tab Sources that you have the bundled file under the file:// scheme and the source files under the special webpack:// scheme.
And yes, you can start debugging as if you had the original source code! Try to put a breakpoint in one line and refresh the page.

I think its better to setup your project using production and development mode
https://webpack.js.org/guides/production/
Its also include how to map your code to debug
devtool: 'inline-source-map'

Source maps are very useful as already pointed out.
But sometimes selecting which source map to use could be a pain.
This comment on one of the Webpack source map issue might be helpful for selecting which source map to use based on requirements.

Chrome also has a format option in the debugger. It doesn't have all the information a normal source file would but it's a great start, also you can set breakpoints. The button you click is on the bottom left of the first screen shot, looks like {}.
Before formatting:
After formatting.

Have a look Here
its a beautifier that deminifies javascript. at the bottom, it has a list of various plugins and extensions for browsers, check them out.
you might be interested in FireFox Deminifier , its supposed to deminify and style your javascript when its retrieved from the server.
(source: mozilla.net)