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.