DEV Community

Reene
Reene

Posted on

[React.js][Webpack] webpack setup for react from scratch

#webpack #react

youtube

repository

npm install --save-dev @babel/core@^7.12.13 @babel/preset-env@^7.12.13 @babel/preset-react@^7.12.13 babel-loader@^8.2.2 css-loader@^5.0.1 file-loader@^6.2.0 mini-css-extract-plugin@^1.3.5 sass@^1.32.6 sass-loader@^10.1.1 style-loader@^2.0.0 webpack@^5.20.1 webpack-cli@^4.5.0 webpack-dev-server@^3.11.2
Enter fullscreen mode Exit fullscreen mode

.barbelrc

{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
Enter fullscreen mode Exit fullscreen mode

webpack.config

const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { output: { path: path.join(__dirname, '/dist'), filename: 'index.bundle.js', }, devServer: { port: 3010, watchContentBase: true, }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', ], } ] }, plugins: [new MiniCssExtractPlugin()], };
Enter fullscreen mode Exit fullscreen mode

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React App</title> <link rel="stylesheet" href="main.css"> </head> <body> <div id="app"></div> <script src="index.bundle.js"></script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

index.js

require('file-loader?name=[name].[ext]!./index.html'); import React from 'react'; import ReactDOM from 'react-dom'; import { App } from './App'; import './App.scss'; const appElement = document.getElementById('app'); ReactDOM.render(<App />, appElement);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)