Configuring Webpack for React - reactjs

Question

I'm trying to create a Reactjs project from scratch. I've heard that it's easier to use create-react-app. I have also been told that the standard industry practise is to use webpack to bootstrap your React projects.
I have created my webpack config file like below:
const path = require('path');
const DIST_DIR = path.resolve(__dirname, "dist");
const SOURCE_DIR = path.resolve(__dirname, "src");
const config = {
entry: SOURCE_DIR + "/app/app.js",
output: {
path: DIST_DIR + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
loaders: [
{
test: "/\.js?/",
include: SOURCE_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-2']
}
}
]
}
};
module.exports = config;
and I have added the build and build:prod scripts for running in devt and production mode as so:
{
"name": "basics",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
"build": "webpack -d && copy src/index.html dist/index.html &&
webpack-dev-server --content-base: src/ --inline --hot",
"build:prod": "webpack -p && copy src/index.html dist/index.html"
},
"keywords": [
"React",
"JavaScript",
"Front End"
],
"author": "MIT",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"#babel/preset-env": "^7.0.0-beta.40",
"#babel/preset-react": "^7.0.0-beta.40",
"#babel/preset-stage-2": "^7.0.0-beta.40",
"babel-loader": "^7.1.4",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0"
}
}
When I run npm start, the app crashes and I get this error in console:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.module has an unknown property 'loaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?,
exprContextRequest?, noParse?, rules?, defaultRules?,
unknownContextCritical?, unknownContextRecursive?,
unknownContextRegExp?, unknownContextRequest?, unsafeCache?,
wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?,
strictExportPresence?, strictThisContextOnImports? }
-> Options affecting the normal modules (`NormalModuleFactory`).
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! basics#1.0.0 build: `webpack -d && cp src/index.html
dist/index.html && webpack-dev-server --content-base: src/ --inline --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the basics#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional
logging output above.
I think the error is in my build script where I'm doing the copy but I can't be sure as it's my first time with webpack.
Can someone help me solve this? Thanks.

Answer 1

You want to use rules instead of loaders.
The information is there in the error. It tells you what are valid properties.
From the webpack docs https://webpack.js.org/concepts/loaders/
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
So for yours:
module: {
rules: [
{
test: "/\.js?/",
include: SOURCE_DIR,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-2']
}
}
]
}

Answer 2

Create-react-app is the easiest option but if you really want to understand how everything is set up under the hood you might want to build a simple app using Webpack, Babel and React from scratch. that's what I did.
Or you could go through my tutorial to save some time. Webpack, Babel, React, Redux, Apollo. From scratch to the production stack.