README.md

webpack-config-handbook

Executable Webpack demos, still UPDATING!

Table of Contents generated with DocToc

• How to run the demo
• Content
  • 01-get-started
  • 02-entry-and-output
  • 03-loaders
  • 04-handle-styles
  • 05-code-splitting
  • 06-config-in-prod
  • 07-bundle-optimization
  • 08-best-practice-for-dev
  • 09-others
  • 10-js-bundlers
• Not found what you need？

How to run the demo

1. clone repo & enter the demo directory
2. run a demo by yarn open <path>

Example:

$ yarn open 05-code-splitting/async-chunk

Content

01-get-started

• hello-webpack

02-entry-and-output

• entry-string
• entry-array
• entry-object
• entry-function
• output-filename
• output-path(TODO)
• output-publicPath(TODO)
• output-chunkFilename(TODO)

03-loaders

• babel-loader
• css-loader
• ts-loader
• eslint-loader
• html-loader
• handlebars-loader
• vue-loader
• file-loader
• url-loader
• svg-inline-loader(TODO)
• how-to-write-a-loader

04-handle-styles

• css-modules
• extract-css
• mini-css-extract-plugin
• extract-multiple-css
• less
• scss
• postcss-loader
• postcss-autoprefixer
• postcss-cssnext
• postcss-stylelint

05-code-splitting

• async-chunk

06-config-in-prod

• caching
• define-plugin
• html-webpack-plugin
• minification
• minification-css

07-bundle-optimization

• dll-plugin
• happypack
• scope-hoisting
• tree-shaking

08-best-practice-for-dev

• hmr-react
• size-plugin
• speed-measure-webpack-plugin
• webpack-dashboard
• webpack-merge

09-others

• externals
• ...

10-js-bundlers

• parcel-quick-start
• rollup-quick-start
• rollup-tree-shaking

Not found what you need？

This repo is still updating, any issue & contribution is welcome💡