This is the 11th day of my participation in Gwen Challenge

In fact, construction is the embodiment of engineering and automation ideas in front-end development, a series of processes with code to achieve, so that the code automatically execute this series of complex processes. Builds inject more life into front-end development and free up our productivity.

With its powerful functions and good use experience, Webpack has become the most popular and active building tool in the community, and it is one of the skills that modern Web development must master.

background

In today’s front-end environment, various frameworks and tools emerge in endlessly, such as React, Vue, Angular, etc., which greatly improve our development efficiency. However, they all have one thing in common: source code cannot run directly, and must be transformed to be executed.

The process of converting code is called a build, and the tools used to do that are called build tools, and Webpack is one of the best.

General role of build tools:

  • Code conversion: TypeScript to JavaScript, SCSS to CSS, etc.
  • File optimization: compress JavaScript, CSS, HTML code, compress merged images, etc.
  • Code splitting: Extract common code from multiple pages, extract code that does not need to be executed on the first screen and load it asynchronously.
  • Module merge: In a modularized project, there will be many modules and files, and you need to build functionality to merge modules into a single file.
  • Auto refresh: Listen for changes to the local source code, and automatically rebuild and refresh the browser.
  • Code validation: Verifies compliance with specifications and unit tests before submitting code to the repository.
  • Automatic release: After updating the code, automatically build the online release code and transfer it to the release system.

The concept of Webpack

Webpack is a build tool developed using NodeJs that is essentially a static Module bundler for modern JavaScript applications.

When Webpack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles.

All files in Webpack are modules, through Loader to convert files, through Plugin to inject hooks, and finally output files composed of multiple modules.

Webpack focuses on building modular projects. To see what it really is, borrow the image from Webpack’s homepage:

All files, such as JavaScript, CSS, SCSS, images and templates, are modules in Webpack’s eyes. The advantage of this is that the dependency between modules can be clearly described, so that Webpack can combine and package modules easily. After processing by Webpack, the final output will be static resources that the browser can use.

Basic configuration of Webpack

The following is the basic configuration of Webpack, which contains the four core concepts of Webpack:

  • The entrance (entry)
  • Output (output)
  • loader
  • The plug-in (plugins)
const path = require('path');

module.exports = {
    // Mode configuration
    mode: "production".// "production" | "development" | "none"

    // Import file
    entry: "./app/entry".// string | object | array

    output: {
        // How does WebPack output the resulting options
        path: path.resolve(__dirname,
            "dist"), // string
    },

    module: {
        // About module configuration
        rules: [
            // Module rules (configures loader, parser, etc.)
            {
                test: /\.jsx? $/,}},/ / the plugin
    plugins: [
        // ...],}Copy the code

Advantages and disadvantages of Webpack

Advantages:

  • Focus on the processing of modular projects, can do out of the box in one step;
  • Plugin extension, complete and easy to use without losing flexibility;
  • Usage scenarios are not limited to Web development;
  • The community is large and active, often introducing new features that keep up with The Times, and finding existing open source extensions for most scenarios;
  • Good development experience.

Disadvantages:

  • Only modular development can be used

Reasons for choosing Webpack

Webpack stands out among the many build tools for the following reasons:

  • Webpack can provide a one-stop solution for new projects that most teams use to keep abreast of The Times. These technologies are almost always “modular + new language + new framework”.
  • Webpack has a good ecological chain and maintenance team, which can provide good development experience and guarantee quality;
  • Webpack is used and validated by a large number of Web developers around the world to find tutorials and experience sharing at all levels.

(End of article)

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Everybody is good! I am the author of programming Samadhi, yi Wang, my public account is “programming Samadhi”, welcome to pay attention to, I hope you can give me more advice!

Knowledge and skills should be paid equal attention to, internal force and external power should be repaired simultaneously, theory and practice should grasp both hands, both hands should be hard!