The words written in the front
Webpack is the king of front-end packaging.
(a) packaging, not only webpack
Front-end packaging tools include Grunt,Gulp,Roleup, etc.
The comparison is as follows:
| tool | Applicable mode | The characteristics of |
|---|---|---|
| Grunt | MPA | Old packaging tools, file – based media (slow running, scattered script files when a large number of affected |
| Gulp | MPA | Easy to learn, nodeJs-based Steam stream packaging |
| Webpack | SPA | At present the most powerful packaging tool, but too bloated, how to simply package JS is not recommended |
| Roleup | MPA | Tree-shaking features (for ES6, packaged on demand, not for now (2018, Vuex, React) |
(2) The core concept of Webpack
- Entry:
Entry indicates the file from which webpack starts to pack and builds internal dependencies
- Output:
Where and how to name the Output of resource bundles that are packaged by Webpack
- Loader:
Loader enables Webpack to handle resources that are not JavaScript files (Webpack itself only understands JavaScript)
- Plugins:
Plugins can be used to perform a wider range of tasks, from packaging optimization and compression to redefining variables in the environment.
- Mode:
Mode indicates that WebPack uses the configuration of the corresponding Mode
(3) Comparison between WebPack4 and WebPack5
| The dimension | webpack4.X | webpack5.X |
|---|---|---|
| version | 4.X | 5.X |
| Installation code | yarn add [email protected] webpack-cli -D | yarn add webpack webpack-cli -D |
| The script configuration | ‘dev’:”webpack –mode development “ | ‘dev’:”webpack –mode development “ |
| Start the command | yarn dev | yarn dev |
| Webpack – cli version | 3.X | 4.X |
| Empty Project – Development Environment – Build time | 1.74 s | 0.87 s |
| Empty Project – Development environment -main.js | 4KB | 1.24 KB |
| Code perspective | CommonJS package modules (closures) | (nested) anonymous functions; The eval etc. |
| Empty Project – Production Environment – Build time | 970 B | 41B |
| Empty Project – Production Environment -main.js | 1.85 s | 0.73 s |
| Principle of packaging | polyfill.js | Prepack (precompile)prepack.io/ |
Refer to the link
Segmentfault.com/a/119000002…
Juejin. Cn/post / 688659…
The above
Write in the last
Recommend a full series of TS tutorials bar. Recent TS in ascension, collect a set of very good tutorial, free to share with everyone www.yidengxuetang.com/pub-page/in…