A Beginner's Guide to Webpack

This article explores Webpack - a powerful static module packer that simplifies and optimizes web development workflows. Although the Webpack documentation is detailed, beginners may still face the problem of a steep learning curve. This tutorial is designed to help you master the core concepts of Webpack and guide you through practical operations step by step.

Core points:

• Webpack basics: Webpack treats all files and resources as modules, builds dependency graphs, and generates one or more bundles for web deployment.
• Overview of core concepts: Understand entry, output, loaders, plugins and mode settings in different environments (development, production) Use Webpack effectively.
• Webpack 5 Enhancements: Edition 5 introduces features such as persistent cache, improved Tree Shaking, and delete automatic Node.js polyfills to improve performance and reduce bundle size.
• Beginner of Webpack: Start Webpack project by setting basic configuration files, understanding default settings, and using plug-ins such as html-webpack-plugin to perform dynamic HTML generation.
• Advanced Usage: Learn to use style-loader and css-loader to process CSS, use built-in modules to replace old loaders to manage resources, and use Webpack's development server for real-time reloading to optimize the development process .
• Production environment best practices: Utilize the capabilities of Webpack to transform modern JavaScript, manage styles and resources, and speed up development using tools such as webpack-dev-server and optimizations for production version building.

What is Webpack?

The core of Webpack is a static module packer. In a specific project, Webpack treats all files and resources as modules and relies on a dependency graph. This dependency diagram describes how modules are associated with each other through references (require and import statements) between files. Webpack statically iterates through all modules to build the graph and uses it to generate a single bundle (or multiple bundles) – a JavaScript file containing code from all modules and combined in the correct order. "statically" means that when Webpack builds its dependency graph, it does not execute the source code, but rather combines the modules and their dependencies into a bundle. You can then include it in your HTML file.

Webpack main concepts:

Before we are deeply practicing, we need to clearly understand some of the main concepts of Webpack:

• Entry: Entry point is the module Webpack uses to start building its internal dependency graph. From there, it determines other modules and libraries (directly and indirectly) that the entry point depends on and includes them in the graph until there are no remaining dependencies. By default, the entry property is set to ./src/index.js, but we can specify different modules (or even multiple modules) in the Webpack configuration file.
• Output: output Attribute indicates where the Webpack issues the bundle and the name to use for the file. The default values ​​for this property are ./dist/main.js of the main bundle and ./dist of other generated files (such as images). Of course, we can specify different values ​​in the configuration as needed.
• Loaders: By default, Webpack only understands JavaScript and JSON files. To process other types of files and convert them into valid modules, Webpack uses a loader. The loader converts the source code of non-JavaScript modules, allowing us to preprocess these files before adding them to the dependency graph. For example, a loader can convert files from CoffeeScript language to JavaScript, or convert inline images to data URLs. Using the loader, we can even import CSS files directly from the JavaScript module.
• Plugins: Plugins are used for any other tasks that the loader cannot perform. They provide us with a wide range of solutions for resource management, bundle minimization and optimization, and more.
• Mode: Usually, when we develop an application, we use two types of source code—one for development version building and one for production version building. Webpack allows us to set the version to be generated by changing the mode parameter to development, production or none. This allows Webpack to use built-in optimizations corresponding to each environment. The default value is production. none mode means that no default optimization options are used.

How does Webpack work:

Even a simple project contains HTML, CSS, and JavaScript files. In addition, it may also contain resources such as fonts, images, etc. Therefore, a typical Webpack workflow will include setting up index.html files with appropriate CSS and JS links and necessary resources. Furthermore, if you have a lot of interdependent CSS and JS modules, you need to optimize and properly combine them into a unit ready for production.

To do all this, Webpack relies on configuration. Starting with version 4 and later, Webpack provides reasonable default values ​​out of the box, so no configuration files are required. However, for any non-simple project, you need to provide a special webpack.config.js file that describes how to convert files and resources and what type of output should be generated. This file can quickly become huge, which makes it difficult to understand how Webpack works unless you understand the main concepts behind how it works.

Based on the provided configuration, Webpack starts at the entry point and parses every module it encounters when building the dependency graph. If the module contains dependencies, this process is performed recursively for each dependency until the traversal is complete. Webpack then bundles the modules of all projects into a small number of bundles (usually only one) for the browser to load.

New features of Webpack 5:

Webpack 5 was released in October 2020. The announcement is long and explores all changes made to Webpack. It is impossible to mention all changes, and it is also unnecessary for beginners' guides like this. Instead, I'll try to list some general points:

• Use persistent cache to improve build performance. Developers can now enable file system-based caching, which will speed up development and builds.
• Long-term caching has also been improved. In Webpack 5, changes made to code (comments, variable names) that do not affect the minimized bundle version will not cause cache invalidation. In addition, new algorithms are added that assign short numerical IDs to modules and blocks in a deterministic way and short names to the export. In Webpack 5, they are enabled by default in production mode.
• Bundle size has been improved due to better Tree Shaking and code generation. Thanks to the new nested Tree Shaking feature, Webpack is now able to track access to export nested properties. CommonJs Tree Shaking allows us to eliminate unused CommonJs exports.
• The minimum supported Node.js version has been increased from 6 to 10.13.0 (LTS).
• The code base has been cleaned. Removed all items marked as deprecated in Webpack 4.
• Remove automatic Node.js polyfills. Previous versions of Webpack include polyfills for native Node.js libraries such as crypto. In many cases, they are unnecessary and greatly increase the bundle size. That's why Webpack 5 stops auto-filling these core modules and focuses on front-end compatible modules.
• As an improvement in development, Webpack 5 allows us to pass target lists and support target versions. It provides automatic determination of the target path. Additionally, it provides automatic, unique naming, which prevents conflicts between multiple Webpack runtimes using the same global variable for block loading.
The
• webpack-dev-server command is now webpack serve.
• introduces the resource module, which replaces the use of file-loader, raw-loader and url-loader.

Beginner:

Now we have a solid theoretical foundation, let us realize it in practice.

First, we will create a new directory and switch to it. Then, we will initialize a new project:

mkdir learn-webpack
cd learn-webpack
npm init -y

Next, we need to install Webpack and Webpack CLI locally (command line interface):

npm install webpack webpack-cli --save-dev

Then we will create a src directory and put a index.js file in it so that it contains console.log("Hello, Webpack!");. Now we can run the dev task to start Webpack in development mode:

npm run dev

As mentioned earlier, Webpack sets the default entry point to ./src/index.js and sets the default output to ./dist/main.js. So when we run the dev task, what Webpack does is get the source code of the index.js file and bundle the final code into the main.js file.

To verify that we are getting the correct output, we need to display the results in the browser. To do this, let's create a dist file in the index.html directory:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Getting Started With Webpack</title>
  </head>
  <body>
    <🎜>
  </body>
</html>

Now, if we open the file in our browser, we should see the "Hello, Webpack!" message in the console.

(The following content will be briefly summarized due to space limitations, and the core steps and key code snippets are retained. Please refer to the original text for the complete tutorial.)

Use html-webpack-plugin: Install and configure the html-webpack-plugin plug-in to automatically generate and update index.html files to avoid manual modification.

Custom entry and output: Modify webpack.config.js, customize the entry file and output directory and file name.

Convert modern JavaScript to ES5: Install babel-loader, configure webpack.config.js, convert ES6 code to ES5 compatible code.

Processing styles: Install css-loader and style-loader, configure in webpack.config.js, import and apply the CSS file to the page.

Resource Management: Use the asset/resource built-in

module in Webpack 5 to process resources such as pictures.

Use webpack-dev-server to accelerate development: webpack-dev-server Install and configure

to achieve real-time reloading.

Clean the output: clean-webpack-plugin Use the

to clean the output directory.

Conclusion:

This tutorial only introduces the core concepts of Webpack, which also provides many other features, plug-ins and different technologies. It is recommended that you refer to official documents and other learning resources to further study.

Webpack FAQ (abbreviated version):

• The difference between Webpack and other module packers? Webpack has a powerful plug-in system, supports multiple file types, and has code segmentation capabilities.
• How to configure Webpack to suit multiple environments? Create different configuration files and merge configurations using webpack-merge.
• How does Webpack handle CSS? Use style-loader and css-loader.
• What is the hot module replacement (HMR) in Webpack? Allows update of modules at runtime without fully refreshing the page.
• How to optimize the construction of Webpack production version? Code compression, Tree Shaking, Code segmentation, etc.
• How to use Webpack with Babel? Install babel-loader and configure.
• How to use Webpack with TypeScript? Install ts-loader or awesome-typescript-loader.
• How to use Webpack to process images? Use file-loader or url-loader (Webpack 5 uses asset modules).
• How to use Webpack with React? Use babel-loader to handle JSX, you can use react-hot-loader.
• How to debug the Webpack configuration? Use the debug and devtool options to view error messages and stack traces.

I hope this abbreviated tutorial will help you get started with Webpack quickly. For more details, please refer to the original text.

The above is the detailed content of A Beginner's Guide to Webpack. For more information, please follow other related articles on the PHP Chinese website!