From IT Skills
Jump to: navigation, search

Пособие по 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.



is bad for Node.js#10



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

Angular 2 lazy loading with Webpack


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]

bundle analysis



Webpack-Dev-Server Vs. Webpack-Serve... webpack-dev-server was released earlier, it has been deprecated as of January 2018 and no more development will be done... 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

ramdisk... Windows users without WSL 2.0 are encouraged to install it to make use of this feature, or create a ramdisk manually using a tool like ImDisk.


Cannot read property 'call' of undefined[edit]

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.



a way of excluding dependencies from the output bundles

  • needs short module paths like => import ... from '@babylonjs/core'
    either we may replace (ugly!) sources with regex "@babylonjs/(\w+)/(.+?)" "@babylonjs/$1" OR BETTER !!! use like => config.externals = [function (context, request, callback) { if (/^@babylonjs\/.+/.test(request)) return callback(null, 'BABYLON'); callback(); }];

importing of old-global JS[edit]


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%)