Skip to content

Instantly share code, notes, and snippets.

@pmikutel
Last active February 9, 2017 16:30
Show Gist options
  • Save pmikutel/ea082caf6c50a82fd185867a34ac5dae to your computer and use it in GitHub Desktop.
Save pmikutel/ea082caf6c50a82fd185867a34ac5dae to your computer and use it in GitHub Desktop.
Devtalk-5-webpack-tasks-list

Devtalk - Webpack tasks

  • support for es6 (use babel)

using babel-loader

  • correctly import all modules used in the app

done ;)

  • compile scss styles

use sass-loader with node-sass

  • extract all css styles to a separate file

use extract-text-webpack-plugin and css-loader

  • should create 2 bundles - one for main webpage, one for unsupported page

2 entry points + 2x use of Html plugin with excludeChunks option

  • common.js module should be shared between both bundles

solved by using webpack.optimize.CommonsChunkPlugin

  • filenames should be hashed

solved with -[hash] at the end of output files, alternative 'hash' option in html-plugin

  • support for browser-specific prefixes

use autoprefixer plugi for postcss loader

  • automatically create html file during build

done with HTMLWebpackPlugin

  • generate spritesheets from images in sprites directory + use one of generated icons in project

SpritesmithPlugin from webpack-sprithsmith

  • enviroment specific configs (env/local/conf.js & env/prod/conf.js) should be served when importing config module

using aliases in dev and prod config extensions

  • PRODUCTION global variable should be defined, and set to true only for production (used in modules/log.js)

webpack.DefinePlugin in dev and prod config extensions

  • development enviromnent should support hot-reloading

--hot param in script and hot: true in devServer config

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment