Starting with Webpack

Reading the doc

One of the worst aspect of web pack is its doc. I do not know exactly why but reading it and grasping the main concept is slow and painful.

Any way here are some starting page you can try your self :

  • using webpack for css

https://webpack.js.org/guides/code-splitting-css

Cannot read property ‘hash’ of undefined

95% emittingFatal error: Cannot read property 'hash' of undefined

In my case was due to a missing loader in package.json ts-loader that was required in the web pack config file.

Some settings I use

My sass rule :

Useful webpack plugin

  • webpack merge allow to merge config bewteen a common / dev / prod config or example

https://github.com/survivejs/webpack-merge

Useful webpack Loaders

  • sass loader Loader for scss file

https://github.com/webpack-contrib/sass-loader

  • post css

https://github.com/postcss/postcss-loader

  • sw-precache : Allow to precache assets generating a service worker as for example explained in this blog post.

https://www.npmjs.com/package/sw-precache-webpack-plugin

  • resolve-url-loader: allow to customize the url in url() in sass files when importing from a different directory

https://github.com/bholloway/resolve-url-loader

Web pack starter

Written on February 22, 2017