React Webpack Setup Shaun Wassell Tutorial
If you are following the great tutor Shaun Wassell tutorial on Linkedin on “Building Modern Projects With React” and you are having issues setting up your webpack to work correctly, you may wish to use the configuration below. Please bear in mind that the tech world is an ever-evolving world, if later in the future, this solution does not work, kindly do research and upload for the community as well. You may not need this in your day to day react project, but this will give you an in-depth knowledge of
const path = require(“path”);
const webpack = require(“webpack”);
module.exports = {
entry: “./src/index.js”,
mode: “development”,
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: “babel-loader”,
options: {
presets: [“@babel/env”],
},
},
{
test: /\.css$/,
use: [“style-loader”, “css-loader”],
},
],
},
resolve: {
extensions: [“*”, “.js”, “.jsx”],
},
output: {
path: path.resolve(__dirname, “dist/”),
publicPath: “/dist/”,
filename: “bundle.js”,
},
devServer: {
static: {
directory: path.join(__dirname, “public/”),
},
port: 3000,
devMiddleware: {
publicPath: “https://localhost:3000/dist/",
},
hot: “only”,
},
};
The above configuration got my project running after I uninstalled and re-installed the CSS loader. Here is the command. $ npm remove css-loader && npm install — save-dev css-loader
The attached image was the initial error I was getting while running the code.
Have all the fun you can.
