├── .babelrc ├── .gitignore ├── package-lock.json ├── package.json ├── src ├── App.js ├── App.scss ├── index.html └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"] 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-webpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "serve": "webpack serve --mode development", 8 | "build": "webpack --mode production" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "react": "^17.0.1", 15 | "react-dom": "^17.0.1" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.12.13", 19 | "@babel/preset-env": "^7.12.13", 20 | "@babel/preset-react": "^7.12.13", 21 | "babel-loader": "^8.2.2", 22 | "css-loader": "^5.0.1", 23 | "file-loader": "^6.2.0", 24 | "mini-css-extract-plugin": "^1.3.5", 25 | "sass": "^1.32.6", 26 | "sass-loader": "^10.1.1", 27 | "style-loader": "^2.0.0", 28 | "webpack": "^5.20.1", 29 | "webpack-cli": "^4.5.0", 30 | "webpack-dev-server": "^3.11.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export function App() { 4 | return ( 5 |
6 |

React App

7 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem quos delectus voluptatem ab repellat saepe eos molestiae cupiditate, omnis doloremque, necessitatibus totam consectetur porro sint quam libero aperiam? Laborum, quaerat?

8 |
9 | ); 10 | } -------------------------------------------------------------------------------- /src/App.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codebubb/react-webpack/b2e34deff6fde120c1c0f256a35ff7cfaa9408a0/src/App.scss -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React App 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | require('file-loader?name=[name].[ext]!./index.html'); 2 | import React from 'react'; 3 | import ReactDOM from 'react-dom'; 4 | import { App } from './App'; 5 | import './App.scss'; 6 | 7 | const appElement = document.getElementById('app'); 8 | 9 | ReactDOM.render(, appElement); -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 3 | 4 | module.exports = { 5 | output: { 6 | path: path.join(__dirname, '/dist'), 7 | filename: 'index.bundle.js', 8 | }, 9 | devServer: { 10 | port: 3010, 11 | watchContentBase: true, 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.(js|jsx)$/, 17 | exclude: /node_modules/, 18 | use: { 19 | loader: 'babel-loader' 20 | } 21 | }, 22 | { 23 | test: /\.scss$/, 24 | use: [ 25 | MiniCssExtractPlugin.loader, 26 | 'css-loader', 27 | 'sass-loader', 28 | ], 29 | } 30 | ] 31 | }, 32 | plugins: [new MiniCssExtractPlugin()], 33 | }; --------------------------------------------------------------------------------