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
.barbelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
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()],
};
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>
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);
Top comments (0)