// --- 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' // }) ] }