What problems can 01WebPack solve
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
02 WebPack Installation
Summary: Webpack is one of the NPM community assistant development tools [less], if you want to use Webpack need to go to the community download;
cnpm install -g less
CNPM install -g webpack webpack-cli
[Check whether the installation is successful: 4 indicates that the installation is successful]
Note: -g installs development tools that can be used globally
03 Using webPack
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
04 WebPack Precautions
① 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
05 ES6 module exposed writing method
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;
06 Format of the webpack.config.js file
Overview: the webpack.config.js file can guide how the Webpack tool works;
Requirement: Write it down behind your back
If you like me, you can pay attention to the following public number, know more dry goods. At the same time, you can also scan the following TWO-DIMENSIONAL code to add groups (there is also a group inside the public account)