“This is my fourth day of participating in the First Challenge 2022. For more details: First Challenge 2022.”

What is Webpack and what problems does it solve?

Webpack is the most popular front-end engineering module packaging tool at present, it is designed to solve the front-end modular problem, let us realize how to efficiently manage and maintain every resource in the project, the latest version of Webpack5, the function is becoming more and more powerful, but it still does not forget the original purpose. It has not changed its original purpose as a front-end packaging tool. It analyzes the project structure, finds and loads dependent resource modules, and converts and packages non-browser-supported features (Sass, TypeScript, ES6+, JSX, etc.) into browser-compatible formats for use.

This is where Webpack is most powerful, and we are going to learn the skills necessary for this job from scratch – Webpack!

Webpack中文 网 : webpack.docschina.org/

Install Webpack

If you use the WebPack 4+ version, in addition to Webpack, you will need to install WebPack-CLI with the aim of using Webpack on the command line

    npm install webpack webpack-cli
Copy the code

Using Webpack

1. Run Webpack with zero configuration

After the installation is complete, you can use Webpack directly. Versions later than WebPack 4+ support zero configuration packaging. You do not need to perform other operations

    npx webpack
Copy the code

Make sure your previous NPM version in 5.2+, NPM v5.2.0 introduces the NPM package executable NPX, which calls the corresponding command in node_modules. Bin

Js file, and then output to the dist folder in the current directory. This is the default behavior of webPack with zero configuration.

If you introduce other JS modules into the index.js file, WebPack will continue to load those modules and pack the scattered JS files into a main.js file, as shown below:

In many cases this default configuration does not meet our development requirements. For example:

  • The entry file is notindex.jsIt’s something else
  • Modifying the output directory
  • Output files do not want to callmain.jsI want to change the file name
  • .

For each of these requirements, we can use command-line arguments to override the default Settings

2. Webpack – CLI command line parameters

The webpack-CLI parameters are many and can be viewed via NPX webpack –help

  • If the entry location is set with –entry, WebPack will start looking for and analyzing module dependencies from there at package time

        npx webpack --entry ./src/main.js
Copy the code

  • For example, run –output-path to set the location of the packaged output file

        npx webpack --entry ./src/main.js --output-path ./public/
Copy the code

  • For example, the output environment code is specified by –mode, including production, development, and None (please check the meaning and function of each environment code by yourself).

        npx webpack --entry ./src/main.js --output-path ./public/ --mode production
Copy the code

I believe you have seen that the command line parameters are too cumbersome, input every time, and can not save, the actual development rarely through this way to configure, then is there a better way to achieve custom configuration? The answer is the WebPack configuration file

Webpack configuration file

To implement personalization, create a webpack.config.js file in the project root directory. This file is executed under NodeJS environment and is a commonJS compliant file.

  • throughentryConfiguration SettingsEntry positionIndicating that thewebpackWhere to start analyzing projects
  • throughoutputConfigure packaged filesOutput locationIndicating that thewebpackHow and where to output content, such as:
    • output.pathSet up theOutput the location to save the packaged file, the property must be an absolute pathpath.join()Method to set the absolute path.
    • If you still want toModify the packaged JS file nameThrough theoutput.filenameSet up the
  • throughmodeProperty to output specific environment code
    module.exports = {
        entry:'./src/main.js'.output: {path:path.join(__dirname,'./public'),
            filename:'bundle.js'
        },
        mode:'production'
    }
Copy the code

Then run the following command from the command line to package

    npx webpack
Copy the code

Webpack automatically looks for the configuration in the webpack.config.js file in the current directory and packages it./public/bundle.js.

You can also use the variable name of output.filename to implement special requirements, such as ([name], [hash], etc.), where name is the name of the entry file and hash is the hash character (10 characters are generated by default, but [hash:5] may specify the length of the generated hash character), which is generally used to solve cache problems

     module.exports = {
        entry:'./src/main.js'.output: {path:path.join(__dirname,'./public'),
            filename:'js/bundle-[name]-[hash:5].js'
        },
        mode:'production'
    }
Copy the code

After the above configuration is run, it is packaged into bundle.main.3eef7.js and exported to the public/js folder

4. Customize the Webpack configuration file

Of course, the webpack configuration file can be customized, it can be another name or another directory (e.g../config/webpack.js), run the command to specify the location of the configuration file, such as:

    npx webpack --config ./config/webpack.js
Copy the code

After the language

So far, our code has only used Webpack to load and package JS modules. For other types of modules (CSS, typescript, images, etc.), we have to use the Asset Module resource module or loader to load and compile. I’ll cover this in my next article, webpack5 tutorial 2: resource modules and loaders, so stay tuned.