notes.md

Webpack

https://www.youtube.com/watch?v=MpGLUVbqoYQ&feature=youtu.be

Code and commits: https://github.com/Colt/webpack-demo-app

Basic config

// webpack.config.js
module.exports = {
    entry: "...",
    output: {
        filename: "main.[contentHash].js",
        path: path.resolve(__dirname, "dist"),
    },
    mode: "development",
    devtool: "none", // unwrap the produced eval code
    module: {
        // ...
    }
}

Loaders

// webpack.config.js
module.exports = {
    // ...
    module: {
        rules: [
            {
                
                test: /\.css$/,
                use: [
                    // 'style-loader': use in development mode only
                    'style-loader', // step 3: inject styles into DOM as <style> tags
                    
                    // for production use this instead 'style-loader'
                    MiniCssExtractPlugin.loader, // step 3: Extract css intro files
                    // which will be injected into head, before any JS loads
                    // in order to avoid flickering
                    
                    'css-loader', // step 2: import css as a commonJS module
                    'sass-loader' // step 1: turns sass/scss into css
                ]
            },
            {
                test: /\.html$/,
                use: [ "html-loader" ] // <img src="imge.png"> --> required('./image.png')
                // todo: can I do it this way?
                // use: "html-loader"
            },
           {
                test: /\.(svg|png|jpg|gif)$/,
                use: {
                    // we could also set compression for images
                    loader: "file-loader",
                    options: "[name].[ext]", // options: "[name].[hash].[ext]" // for production
                    outputPath: "images"
                }
                // todo: can I do it this way?
                // use: [{
                //    loader: "file-loader",
                //    options: "[name].[ext]", // options: "[name].[hash].[ext]" // for production
                //    outputPath: "images"
                // }]
            }
        ]
    }, 
}

Plugins

// webpack.config.js
module.exports = {
    // ...
    module: {
        // ...
        
        // for production only:
        optimization: {
            minimizer: [
                // minify css in separate files
                new OptimizeCssAssetsPugin(),
                
                // minify css inside JS
                new TerserWebpackPlugin()
            ]
        },
        
        plugins: [
            // mini-css-extract-plugin
            new MiniCssExtractPattern({
                filename: "[name].[contentHash].css"
            })
        
            // only if I need an entry html file
            // if I develop a library, I dont need a entry html file
            new HtmlWebpackPlugin({
                template: "./src/template.html", // any html file used as a template
                // for the generated index.html
                
                // for development only
                minify: {
                    //removeAttributeQuotes: true, // I wouldn't do it
                    collapseWhitespace: true,
                    removeComments: true
                }
            }),
            
            // use for production only, cuz in development, dist folder is in-memory
            // and gets killed every time the dev-server is closed
            new CleanWebpackPlugin(),
            
            
        ]
        // ...
    }, 
}

Webpack Merge

// webpack.config.js
const common = require("./webpack.common");
const merge = require("webpack-merge");

module.exports = merge(common, 
{
    entry: "...",
    output: "...",
    // ...
})

Webpack dev / prod configuration

// package.js
{
    //...
    "scripts": {
        "start": "webpack-dev-server --config webpack.dev.js --open", // in-memory dist folder
        "build": "webpack --config webpack.prod.js" // physic dist folder
    }
}

Webpack alias

// package.js
// webpack.config.js