Skip to main content

Use case

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

Rules

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'
    output:{
        filename: 'name.js'
        path: path.resolve(__dirname, './dist')
        publicPath: 'dist/'
    },
    mode: 'none'
    module:{
        rules:[
            {
                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.

Types

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

Rules
Types