As a front-end person, do you really know how to use Webpack?

Overview: In The Node platform we can implement modular development; Modules are independent of each other;

If multiple modules work together, the modules need to expose data.

Modular development: multiple modules (each module has its own function) work together to complete a project;

After testing: Node platform module I want to transplant to static pages to achieve modular development.

Found not possible because the browser does not recognize require, exports

Note:

Finally, webpack can allow browsers to recognize require, exports to implement modular development;

② Is to package and merge multiple modules

Summary:

Webpack could allow browsers to recognize require, exports, modules in static pages.

(2) Multiple modules can be packaged and merged

Package order: package and merge according to the order of require in the program

webpack main.js -o dist/bundle.js

① Webpack can only package JS files for the time being

(2) Webpack tool packaging, as long as the JS file code changes need to be re-packaged

Overview: In ES6 the European Computer Society, they customize the official module exposure method. But it’s a very awkward thing;

Major browser vendors do not recognize ES6 module exposure, node platform does not recognize the official ES6 module exposure;

Common exposure in ES6

Note: if multiple modules have naming conflicts, the introduction of modules is not allowed;

Import {} from module

Other forms of modules introduced in ES6

Note: In the future, if there is a naming conflict between modules, you can use the following form to introduce modules;

Webpack packs smoothly;

The default exposure

Overview: Default exposures typically expose classes;

Export default class name;

Overview: the webpack.config.js file can guide how the Webpack tool works;

Requirement: Write it down behind your back