Webpack React Babel build it without modernizr

134 Views Asked by At

hi devs!

I build a ReactJs project with classic ecosystem Webpack and babel.

I need to optimize and control the build resources loaded inside my budles. Currently I reading included modernizr into a part of bundle under "@license React of react-dom.production.min.js"... who included it? how can I exlude it from my builds?

Can someone understand how can i have more control on sub elements of build? thank you.

dependencies:

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.0",
    "css-loader": "^6.7.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "http-server": "^14.1.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }

and webpack.config...


const HtmlPack = require('html-webpack-plugin')
const HtmlList = [
    "index",
    "test/secondpage"
]

module.exports = {

    //https://stackoverflow.com/questions/70916332/webpack-bundle-files-for-multiple-pages
    // entry: { main: [ "./src/index.js", ], test: [ "./src/test/secondpage.js", ], },

    entry: HtmlList.reduce( (config, page) => {
        config[page] = `./src/${page}.js`;
        return config;
    },{}),

    output: {
        path: __dirname+'/public/reactor',
        filename: '[name].bundle.js',
        clean: true
    },
    devServer: {
        static: __dirname+'/src',
        port: 8080,
        open: true,
        hot: true
    },
    optimization: {
        minimize: false,
        // minimizer: [new TerserPlugin({
        //     extractComments: false,
        //   })],
        removeAvailableModules: true,   // detect and remove modules already included
        sideEffects: true,             // detect and not load the sub libs of module  (https://github.com/webpack/webpack/blob/main/examples/side-effects/README.md)
        runtimeChunk: 'single',         // true = automatic nesting chunks progess, 'multiple', 'single' = one file for all chuncks
        removeEmptyChunks: true,        // clean & optimize file size 
        splitChunks: {
            chunks: "all"
        },
    },
    module: {
        rules: [ {
            test: /\.js$/i,
            exclude: /node_modules/,
            use: [ 'babel-loader' ]
        }, {
            test: /\.css$/i,
            exclude: /node_modules/,
            use: [ 'style-loader', 'css-loader' ]
        }
        , {
            test: /\.(jpe?g|png|gif|webp|svg|ico|zip|json)$/i,
            exclude: /node_modules/,
            loader: 'file-loader',
            options: {
                name: '[path][name].[ext]'
            }
        }
    ]
    },
    plugins : [].concat(

        // https://dev.to/marcinwosinek/tutorial-for-building-multipage-website-with-webpack-4gdk
        // https://github.com/jantimon/html-webpack-plugin
        HtmlList.map( page => new HtmlPack({
            filename: `${page}.html`,
        })),

    )
}

UPDATE NOTE 01:

FAKE POSITIVE - sorry After different test i see this: "runtimeChunk" generete a strange no requested inclusion of modernizr and other codes... I don't know why

UPDATE NOTE 02:

It seems that it's included directly via react-dom

/**
 * @license React
 * react-dom.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
/*
 Modernizr 3.0.0pre (Custom Build) | MIT
*/
var aa=__webpack_require__(294),ca=__webpack_require__(840);function p(a){for(var b="https://reactjs.org/docs/error-decoder.html?invariant="+a,c=1;c<arguments.length..... etc

Modernizr 3.0.0pre (Custom Build) | MIT <= wtf???

0

There are 0 best solutions below