These days, it is nearly impossible to go live a website without the assets (JS, CSS, images,…). As the website becomes more complicated, the more assets are required. Therefore, for a big web application, knowing how to manage all of the assets will improve the efficiency in deployment.
What problem is Webpack trying to solve?
We know that in order to import a js file to a HTML file, we need to add a script tag. For example:
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="/js/main.js"></script>
<script src="/js/home-page.js"></script>When the application grows, more and more js files need to be imported.
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="/js/main.js"></script>
<script src="/js/home-page.js"></script>
<script src="/js/page-1.js"></script>
<script src="/js/page-2.js"></script>
<script src="/js/page-3.js"></script>
<script src="/js/page-4.js"></script>
...
<script src="/js/page-51.js"></script>
<script src="/js/page-52.js"></script>
<script src="/js/page-53.js"></script>
<script src="/js/page-54.js"></script>This will lead to some problems in deployment:
Speed: Requesting multiple files will affect web performance. The browser needs to make multiple calls to the server to retrieve the scripts. This actually, is not a really big problem in HTTP/2 protocol, (which is introduced here by the Google Team) that can handle multiple files in one request. However, putting too many assets in the HTML files definitely is not recommended.
Scope and dependency: As all js are imported, all variables declared will have global scope. This will make them conflict with each other if they share the same name and poor scope handling. If one js component depends on another in a different js file, we also need to make sure they are all imported and called correctly.
Security: Showing directly all of our assets makes our website a vulnerable prey for all the hackers outside.
One thing may need to emphasize is that all of these problems may not be encountered during development time. I myself always support the idea that when doing development, we need to make the code more human as we can ( like putting comments, naming files, making directories, frameworks,…). However, when we deploy the code to the outside world, let’s try to make it more robotic (bundling, uglifying,…). This does not only help enhance the speed but also reduce the chance we are being hacked.
So what is Webpack?
Like its name, it acts as a tool to pack all of our web assets to only one file, (or more, but not too many). Let’s take the example above when we need to imports many js files, which will become too troublesome. Webpack will help to bundle all of them into only one single js file. With the help of Immediately Invoked Function Expressions (IIFEs) and module declaration, Webpack also helps to fix the scoping and dependency problems.
But that is not all Webpack can do. Webpack can help build a dependency graph for all of our web assets. With some config, we can bundle not only javascript files but also css, sass, scss, png, … and a lot more. Furthermore, we can easily manage which files are imported in which page.
Webpack also can help to uglify the code, making it harder for hackers to do their evil things.
Cheatsheet
In this part, I will mention some popular config, not in detailed code, but more on what are they and when we need them.
Loaders: Webpack by default is to handle js files only, so when dealing with css, sass, scss,… we need to install some loaders. Some popular one is css-loader, sass-loader, style-loader,
Postcss: This is one of the plugin usually used with Webpack, it helps to translate some of our CSS conventions to pure CSS. One great postcss can be mentioned here is rucksack.
ExtractTextWebpackPlugin: If using loaders by default, it will bundle css to the js file. Use this plugin if we don’t want that.
SourceMapDevToolPlugin: When debugging, it will be difficult if the error comes from only 1 big js file. Use this together with devtool config to identify the error faster.
MultipleBundles: When the output bundled js file becomes too large and contains all logic for all pages. It’s a better idea to split it out and imported only the necessary part in the suitable page.
Webpack Watch, Webpack Dev Server: Add –watch tag, or serve app using webpack dev server will tell webpack to watch all the changes in assets. If there are any changes, it will help to build the application again with the newest file. This is only for development purpose. Webpack Dev Server also supports hot reloading (by adding hot tag), where it only refreshes the affected components instead of the whole application.
No responses yet