1

this is kind of frustrating issue.

I've been trying to build my own "react-scripts" bundle, so my company no longer relies on it. This is something ordered from the heads, in order to reduce licenses and external dependencies.

I've tried the following webpack configurations:

Mine's (paths are hidden):

{
    "mode": "development",
    "devtool": "cheap-module-source-map",
    "entry": {
        "app": "./src/index.js"
    },
    "output": {
        "filename": "[name].js",
        "path": ".../static",
        "publicPath": "/"
    },
    "optimization": {
        "minimize": false
    },
    "resolve": {
        "symlinks": false,
        "extensions": [
            ".js",
            ".mjs",
            ".json"
        ],
        "alias": {
            "@": ".../src"
        }
    },
    "module": {
        "rules": [
            {
                "test": {},
                "loader": "babel-loader",
                "exclude": {},
                "include": [
                    ".../src",
                    ".../node_modules/webpack-dev-server/client"
                ],
                "type": "javascript/auto",
                "options": {
                    "babelrc": false,
                    "presets": [
                        "@babel/preset-env",
                        "@babel/preset-react"
                    ],
                    "plugins": [
                        [
                            "@babel/plugin-proposal-class-properties",
                            {
                                "loose": false
                            }
                        ],
                        [
                            "@babel/plugin-proposal-private-methods",
                            {
                                "loose": false
                            }
                        ],
                        "@babel/plugin-proposal-throw-expressions",
                        "@babel/plugin-transform-modules-commonjs",
                        "@babel/plugin-transform-runtime"
                    ],
                    "env": {
                        "test": {
                            "plugins": [
                                "istanbul"
                            ]
                        }
                    }
                }
            },
            {
                "test": {},
                "exclude": {},
                "use": [
                    {
                        "loader": "style-loader"
                    },
                    {
                        "loader": "css-loader",
                        "options": {
                            "sourceMap": true
                        }
                    },
                    {
                        "loader": "postcss-loader",
                        "options": {
                            "plugins": [
                                null,
                                null,
                                null
                            ]
                        }
                    },
                    {
                        "loader": "less-loader",
                        "options": {
                            "sourceMap": true
                        }
                    }
                ]
            },
            {
                "test": {},
                "loader": "url-loader",
                "options": {
                    "limit": 10000,
                    "name": "images/[name].[hash:7].[ext]"
                }
            },
            {
                "test": {},
                "loader": "url-loader",
                "options": {
                    "limit": 10000,
                    "name": "media/[name].[hash:7].[ext]"
                }
            },
            {
                "test": {},
                "loader": "url-loader",
                "options": {
                    "limit": 10000,
                    "name": "fonts/[name].[hash:7].[ext]"
                }
            }
        ]
    },
    "plugins": [
        {
            "key": "ESLintWebpackPlugin",
            "options": {
                "extensions": "js",
                "emitError": true,
                "emitWarning": true,
                "failOnError": true
            }
        },
        {
            "definitions": {
                "ENVIRONMENT": "\"development\""
            }
        },
        {
            "userOptions": {
                "filename": "index.html",
                "template": "index.html",
                "inject": true,
                "minify": false
            },
            "version": 5
        },
        {
            "patterns": [
                {
                    "from": ".../static",
                    "to": "",
                    "globOptions": {
                        "ignore": [
                            ".*"
                        ]
                    }
                }
            ],
            "options": {}
        },
        {
            "options": {}
        },
        {}
    ],
    "devServer": {
        "host": "localhost",
        "port": 8080,
        "clientLogLevel": "warning",
        "hot": true,
        "contentBase": false,
        "compress": true,
        "historyApiFallback": {
            "rewrites": [
                {
                    "from": {},
                    "to": "/index.html"
                }
            ]
        },
        "open": false,
        "overlay": {
            "warnings": false,
            "errors": true
        },
        "publicPath": "/",
        "proxy": {},
        "quiet": true,
        "watchOptions": {
            "poll": false
        }
    }
}

Demo setup I've found through the Internet:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const EslintWebpackPlugin = require('eslint-webpack-plugin');

const eslintConfig = require(path.resolve('...'));
eslintConfig.globals.React = true;

module.exports = {
    entry: {
        app : './src/index.js'
    },
    output: {
        path: path.join(__dirname, '/dist'),
        filename: '[name].js'
    },
    devServer: {
        port: 8080,
        watchContentBase: true
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules\/(?!(?:...))(\?.*)?$/gi,
                include:[
                    path.resolve('src')
                ],
                use: {
                    loader: 'babel-loader',
                    options : {
                        babelrc: false,
                        presets : [ '@babel/preset-env', '@babel/preset-react' ]
                    }
                }
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new EslintWebpackPlugin({
            context : path.resolve('src'),
            overrideConfig: eslintConfig
        }),
        new HtmlWebpackPlugin({ template: path.resolve('index.html'), inject : true })
    ],
}

When I run npx webpack serve with my configuration, seems that content is not injected into index template so I get:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /</pre>
</body>
</html>

When I run the same but using demo configuration, it works as expected.

NOTE: After fixing some issues, bundling works, but running dev server still doesn't.

0 Answers0