webpack

webpack is a front-end resource component tool, a static module bundler. Compile syntax that the browser does not recognize into syntax that the browser can recognize

From the perspective of webpack, many resource files (js/json/css/img/less) in the front end will be processed as modules. It will conduct static analysis according to the dependencies of modules and package to generate corresponding static resources (bundle s)

Five core concepts of webpack

1.Entry

The Entry indicates which file is the starting point for webpack to start packaging, analyze and build the internal relationship dependency diagram

2.Output

The Output indicates where and how to name the resource bundles packaged by the webpack

3.Loader

Loader (the configuration item is module) enables webpack to handle non javascript files (webpack only understands javascript)

4.Plugins

Plugins can be used to perform a wider range of tasks, ranging from packaging optimization and compression to redefining variables in the environment

5.Mode

Mode indicates that the webpack uses the configuration of the corresponding mode

option	describe	characteristic
development	Set process.env.node_ Set the value of Env to development and enable NamedChunksPlugin and NamedModulesPlugin	An environment in which code can be debugged and run locally
production	Set process.env.node_ The value of Env is set to production	Environment that allows code optimization to run online

First experience

Installation:

Initialize first
npm init -y			//package.json appears
 Then global installation webpack
npm i webpack webpack-cli
 take webpack Add to development dependency(-D)
npm i webpack webpack-cli -D

Create the src folder (src: store the source code of the project), and create the index.js file (entry file, webpack entry (packaging) starting point file) in the src folder,

Create a build (dist, custom directory name) folder (the directory where the code is stored (output to) after being packaged by webpack)

Operation instruction:

1. Development environment:

webpack ./src/index.js -o ./build/build.js --mode=development
 perhaps
webpack ./src/index.js -o ./build --mode=development

webpack will start packaging with. / src/index.js as the entry file, and then output it to. / build/build.js. The overall packaging environment is the development environment
2. Production environment:

webpack ./src/index.js -o ./build/build.js --mode=production
 Or if the file name is not specified in the output file directory, a file name will be automatically generated after packaging main.js
webpack ./src/index.js -o ./build --mode=production

webpack will start packaging with. / src/index.js as the entry file, and then output it to. / build/build.js. The overall packaging environment is the production environment

conclusion

1.webpack can handle js/json files and cannot recognize other resources such as css/img

2. The production environment has one more effect of compressing (simplifying) js code than the development environment

3. The production environment and development environment can compile ES6 modularization into modularization recognized by the browser

Entry file index.js

// Entry file
function add(a, b) {
    return a + b;
}
console.log(add(5, 6));

Development environment packaging results

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
/******/
(() => { // webpackBootstrap
    /******/
    var __webpack_modules__ = ({
        // Describes the packaged entry file
        /***/
        "./src/index.js":
        /*!**********************!*\
          !*** ./src/index.js ***!
          \**********************/
        /***/
            (() => {
            // eval contains the packaged content
            eval("// Entry file \ r\n/* \r\n1. Running instructions: \ R \ ndevelopment environment: webpack. / SRC / index.js - O. / build/build.js -- mode = development \ R \ nwebpack will start packaging with. / SRC / index.js as the entry file and output it to. / build/build.js after packaging. The overall packaging environment is the development environment \ R \ nproduction environment: \ r\n * / \ R \ nfunction add (a, b) {\ r\n return a + B; \ r\n} \ R \ nconsole.log (add) (5 + 6));\n\n//# sourceURL= webpack://webpack02/./src/index.js? ");

            /***/
        })

        /******/
    });
    /************************************************************************/
    /******/
    /******/ // startup
    /******/ // Load entry module and return exports
    /******/ // This entry module can't be inlined because the eval devtool is used.
    /******/
    var __webpack_exports__ = {};
    /******/
    __webpack_modules__["./src/index.js"]();
    /******/
    /******/
})();

Production environment packaging results

// webpack5 compilation is optimized. It will parse the simplified code and directly run the code to get the results
console.log(11);