From IT Skills
Jump to: navigation, search


https://webpack.github.io/docs/comparison.html

Пособие по webpack перевод

The upside of Webpack is that, altho the app may take a few secs to load initially, once loaded and cached it is lightning fast.

versions[edit | edit source]

3[edit | edit source]

is bad for Node.js#10

4[edit | edit source]

https://medium.com/webpack/webpack-4-released-today-6cdb994702d4

Angular[edit | edit source]

How to customize build configuration with custom webpack config in Angular CLI 6

Angular 2 lazy loading with Webpack

CSS[edit | edit source]

Webpack by itself only knows javascript... the order in which webpack applies loaders on the matching resources is from last to first

Style-loader нужен нам для инджекта стилей в head, а css-loader, для того, чтобы мы могли импортировать css в js... css в отдельный bundle файл... установим пакет extract-text-webpack-plugin

but since #4 version mini-css-extract-plugin extracts CSS into separate files... CSS can be extracted in one CSS file using optimization.splitChunks.cacheGroups

there is documentation if you use module bundlers like Webpack, you can also use the styles attribute to load styles from external files at build time. You could write: styles: [require('my.component.css') Set the styles property, not the styleUrls property...] but require(...) is not compatible with AOT

code splitting[edit | edit source]

bundle analysis

dev-server[edit | edit source]

Webpack-Dev-Server Vs. Webpack-Serve... Webpack-serve is more modern due to it being a dependency with leaner code, more modern, and it’s developing with new features and enhancements

Feature Comparison webpack-plugin-serve webpack-dev-server webpack-serve

webpack-plugin-serve[edit | edit source]

webpack-dev-server[edit | edit source]

Cannot read property 'call' of undefined[edit | edit source]

https://github.com/webpack/webpack/issues/6094

https://www.bountysource.com/issues/10735626-uncaught-typeerror-cannot-read-property-call-of-undefined

https://github.com/angular/angular-cli/issues/6196

I noticed that webpack.optimize.ModuleConcatenationPlugin gives this error even with webpack-plugin-serve

if to mix aot and runtime jit codes then #Cannot read property 'call' of undefined will be thrown in #4 version, the workaround is to use #webpack-plugin-serve that include webpack-plugin-serve/client in the entry explicitly.

other[edit | edit source]

importing of old-global JS[edit | edit source]

https://github.com/webpack/imports-loader

UglifyJsPlugin[edit | edit source]

The webpack 2 release came with built-in support for ES2015 modules (alias harmony modules) as well as unused module export detection. To add tree shaking we have to use the UglifyJsPlugin

  • compress: {
    • dead_code: true !!!!!!!
    • keep_fnames: false - to reduce size and eliminate strange error
  • output: {
    • comments: false (if to leave true then size is increased till 50%)