Skip to main content

Use case

  • bundle all external JS to one locally generated JS
  • make images load from a public path


  • Use rules to determine how webpack changes dynamic resources into static ones
  • format is:
    • file name: webpack.config.js
module.exports = {
entry: './src/index.js'
filename: 'name.js'
path: path.resolve(__dirname, './dist')
publicPath: 'dist/'
mode: 'none'
test: /\.(png|jpg$/)
type: 'asset/inline'

Rule (from above)​

  • If I run webpack command, start at index.js and determine dependencies
  • create a bundle file based on the rules from output
  • Determine what to do with each file, for example images that end on .png or .jpg convert it to inline.


  • asset/resource
    • Generates file as same as resource (jpg to jpg)
  • asset/inline
    • generate dist -> convert images to bytes (jpg is generated inside js)
    • caveat increases the size
  • asset
    • Dynamic rules determined by webpack, either use resource or inline
  • asset/source
    • do nothing

babel compiles ECMA script down to what is compatible to the browser.Β 

@babel/env - converts ecma 678 to ecma 5Β 

  • if you want to add specific ecma plugin you add them in your preset
  • minify css: minicssextractplugin
  • browser caching [contenthash]

webpack-dev-server for hot deploying code