If by “get started building website with React” you mean you can’t even output anything, then try this one:
Can confirm that it works.
Follow step by step – if something’s not working, you have a typo somewhere. I think the only relevant changes from webpack since this tutorial is that they changed ‘loaders’ to ‘rules’, and you can apply an array of loaders using “use” property in lieu of “loader”, but even then the old code works just as well.
Don’t over-complicate webpack if you’re just starting out. A lot of the confusing options are, well, optional.
All you really need is an entry point, an output, and loaders.
The HTML plugin in that link is optional if you src to the build js correctly in your index.html afaik (I could be wrong, but for the purpose of getting something to run it seems to work).
Your entry point is your main,app,index,whatever.js.
Your output is the built,build,distribution,whatever.js.
Loaders take in a regex which tests which files it will apply loader(s) to, and a loader property (e.g. loader: “babel-loader”).
To use SCSS, take a look at the documentation for sass loader
Likewise for plain CSS and CSS-loader
Here’s a sample webpack config:
module.exports = {
entry: "./scripts/app.js",
output: {
filename: "./build/build.js"
},
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader"
}]
},{
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: "babel-loader"
}]
}]
}
};
Ironically, I think part of what makes webpack so confusing is that it does so much stuff for you that it’s hard to believe it’s as simple as it is.
Common mistakes:
Improperly re-arranged webpack config properties
Wrong path
Forgetting to npm install something
Not setting up .babelrc
Not googling your error messages
A typo literally anywhere
