Skip to content

Latest commit

 

History

History
34 lines (32 loc) · 3.3 KB

README.md

File metadata and controls

34 lines (32 loc) · 3.3 KB
Raw

Learn Webpack

A collection of simple Webpack examples:

  • Mode: Enable webpack built-in optimizations for development and production.
  • Multiple Configurations: Use --env flag to create different config based on the environment.
  • Bundle: Merge multiple javascripts files.
  • Separate Runtime: Extract webpack runtime logic in a separate file.
  • Tree Shaking: Remove unused javascript codes from the app.
  • Chunks Types: Explain what a webpack chunk is.
  • Dynamic Import: Use import() to load part of an app on demand.
  • Code Splitting: Divide an app into smaller files.
  • Loaders and Plugins: Explain what webpack loaders and plugins are.
  • Asset Modules: Import additional type of assets without configuring loaders.
  • Babel: Use babel-loader to transpile ES2015 code into into a backwards compatible version of javascript.
  • Babel Polyfill: Apply pollyfills to provide a backwards compatible version of a javascript feature.
  • Html Plugin Template: Generate html files with html-webpack-plugin.
  • Load CSS: Use css-loader and style-loader to parse stylesheets and place them into html page.
  • Source Maps: Emit javascript and css source maps.
  • Public Path: Specify a base path for all the assets within your applicaion.
  • Separate CSS: Use mini-css-extract-plugin to extract stylesheets into a separate file.
  • Remove Unused CSS: Use purgecss to remove unused part of stylesheets.
  • Load Images: Use asset/resource to parse and emit images and asset/source to parse raw svg files.
  • SASS: Load sass files with sass-loader.
  • PostCSS: Enable postcss with postcss-loader.
  • Minify: Enable code minification by using mode.production, css-minimizer-webpack-plugin and HtmlWebpackPlugin.minify.
  • Caching: Setup client level caching by adding hash to filenames.
  • Context Module: Run require.context() at compile time to import assets.
  • Debug Webpack: Debug webpack configuration using nodejs --inspect tool.
  • Lazy Load Image: Dynamically import an image with import().
  • Lazy Load Multiple Images: Use require.context() to include all images from a folder and dynamically load them with import().
  • Lazy Load Multiple Images Folders: Dynamically import images inside multiple folders when a button is clicked.
  • Composing Configurations: Organize webpack configs in separate files and merge them with webpack-merge.
  • Static Site Generator: Create a simple SSG on top of HtmlWebpackPlugin.