avatar
Untitled

Guest 93 19th Jan, 2020

MARKUP 4.22 KB
                                           
                         // --- Module Bundler ---
// - takes all modules and intelligently combines them into ONE single module or ONE single file
const path                      = require( 'path' ) // file system
const HtmlWebpackPlugin         = require( 'html-webpack-plugin' ) // allows generate an 'index.html' file automatically which will include a reference to the ONE single-bundled file
const { BundleAnalyzerPlugin }  = require( 'webpack-bundle-analyzer' )
const MiniCssExtractPlugin      = require( 'mini-css-extract-plugin' )

module.exports = { // exports object - webpack configuration settings
    entry: {
        index: './src/index.js' // entrypoint/main root file of application
    },
    // - WHAT (files) to load for the browser
    output: {
        // - How to handle the files
        // - where to output the bundled file
        path: path.resolve( __dirname, 'dist' ), // creates directory
        filename: '[name]-chunk.bundle.js' // all of the code generated in ONE bundle
    },
    resolve: {
        alias: {
            publicCss: path.resolve( __dirname, 'public' ),
            stylesMain: path.resolve( __dirname, 'src/styles/main' ),
            stylesButtons: path.resolve( __dirname, 'src/styles/buttons' ),
            Content: path.resolve( __dirname, 'src/components/content' ),
            Navigation: path.resolve( __dirname, 'src/components/navigation' )
        }
    },
    optimization: {
        splitChunks: {
            chunks: 'async',
            cacheGroups: { // OVERRIDE any settings that are in contained in the "splitchunks" object
                react: {
                    test: /[\\/]node_modules[\\/]((react).*)[\\/]/,
                    name: 'react',
                    chunks: 'all'
                },
                common: {
                    test: /[\\/]node_modules[\\/]((?!react).*)[\\/]/,
                    name: 'common',
                    chunks: 'all'
                }
            }
        }
    },
    module: { 
        // Loaders - tells what transformations before creating the single file
        // - allows to tell 'webpack' how to INTERPRET and TRANSLATE 'non-javascript'/all files after it has been resolved
        // - returns COMPILATIONS; returns NEW SOURCES
        rules: [ // sets rules
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }, // transforms any JS file
            {
                test: /\.(png|svg|jpg|gif)$/, 
                exclude: /node_modules/,
                use: ['file-loader']
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            minimize: true
                        }
                    }
                ]
            },
            { 
                test: [
                    /\.css$/,
                    /\.scss$/
                ],
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            } // transforms any single CSS file with CSS 'require' syntax; and takes required CSS which injects it into the page to make it active
        ]
    },
    mode: 'development', // mode for building the code; other option is 'production' for deployment
    plugins: [
        // - is an ES5 'class' w/c implements an "APPLY" function
        // - compiler uses it to 'emit' EVENTS
        // - 'adds' additional functionality to "webpack's event lifecycle"
        new HtmlWebpackPlugin( { // instance
            template: './src/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin( {
            filename: '[name].css',
            chunkFilename: '[id].css'
        }),
        new BundleAnalyzerPlugin()
        // new BundleAnalyzerPlugin( {
        //     analyzerMode: 'static'
        // })
    ]
}
                      
                                       
To share this paste please copy this url and send to your friends
RAW Paste Data

Comments

Authentication required

You must log in to post a comment.

Log in
    There are no comments yet.