1.0.1 • Published 5 months ago
6dwebpack-starter v1.0.1
Webpack Starter
Installation
npm init -y
: Creates a package.json file for your project.npm i -D webpack webpack-cli
: Installs Webpack and the Webpack Command Line Interface (CLI).npm install webpack-dev-server --save-dev
: Installs the Webpack development server.npm i -D sass style-loader css-loader sass-loader
: Installs tools for processing Sass and CSS files.npm i -D html-webpack-plugin html-loader
: Installs tools for processing HTML files.npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react
: Installs Babel tools. These tools make your JavaScript code compatible with older browsers.npm i -D react react-dom
: Installs the React library and the ReactDOM module.npm i -D tailwindcss
: Installs the Tailwind CSS library.npm i -D postcss postcss-loader postcss-preset-env
: Installs PostCSS tools.npm i redux
: Installs the Redux library.npm install @reduxjs/toolkit
: Installs the Redux Toolkit library.npm i -D react-redux
: Installs the React-Redux connection.npm i --save-dev @redux-devtools/core
: Installs Redux DevTools.npm i -D react-router
: Installs the React Router library.npm i -D react-router-dom
: Installs the React Router DOM module.npm i -D webpack-bundle-analyzer
: Installs the Webpack Bundle Analyzer tools. These tools visualize the sizes and usage of files in your project.
To use these commands, navigate to your project directory and run them one by one. They will install the necessary tools and libraries for your React project.
Files
touch webpack.config.js
// webpack.config.jsx
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BundleAnalyzerPlugin =
require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
mode: 'production',
entry: path.resolve(__dirname, 'src/index.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
clean: true,
},
//devtool: 'source-map',
devServer: {
static: {
directory: path.resolve(__dirname, 'dist'),
},
port: 3000,
open: true,
hot: true,
compress: true,
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public', 'index.html'),
}),
//new BundleAnalyzerPlugin(),
],
resolve: {
extensions: ['.js', '.jsx', '.md'],
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
},
}
touch .babelrc
// .babalrc
{
"presets": [
"@babel/preset-env",
[
"@babel/preset-react",
{
"runtime": "automatic"
}
]
]
}
touch tailwind.config.js
// tailwind.config.js
module.exports = {
content: ['./public/index.html', './src/**/*.{html,js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
touch postcss.config.js
// postcss.config.js
const tailwindcss = require('tailwindcss')
module.exports = {
plugins: ['postcss-preset-env', tailwindcss],
}
touch netlify.toml
// toml
[[redirects]]
from = "/*"
to = "/"
status = 200
touch .gitignore
// .gitignore
node_modules
mkdir public
mkdir src
cd public/
touch index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<title>Webpack - Starter</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
cd ..
cd src
touch index.js
import './styles/main.scss'
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './redux/config/store.jsx'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
</React.StrictMode>
)
touch App.js
import Header from './components/Header/Header.jsx'
import Navigation from './components/Navigation/Navigation.jsx'
import { Route, Routes } from 'react-router-dom'
import About from './routes/About/About.jsx'
import Contact from './routes/Contact/Contact.jsx'
export default function App() {
return (
<div>
<Routes>
<Route exact path='/' element={<Navigation />}>
<Route index element={<Header />} />
<Route path='about' element={<About />} />
<Route path='contact' element={<Contact />} />
</Route>
</Routes>
</div>
)
}
mkdir styles
mkdir routes
mkdir redux
mkdir components
cd styles
touch main.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
cd ..
cd routes
mkdir About
cd About
touch About.jsx
export default function About() {
return (
<div>
<p className='text-red-600 text-2xl font-bold'> ABOUT PAGE! </p>
</div>
)
}
cd ..
mkdir Contact
cd Contact
touch Contact.jsx
import './contact.styles.scss'
export default function Contact() {
return (
<div className='contact'>
<header className='contact-header'>
<h1> Contact Page </h1>
</header>
</div>
)
}
touch contact.styles.scss
.contact {
background-color: cadetblue;
.contact-header {
padding: 10px;
h1 {
color: brown;
font-weight: bold;
}
}
}
cd ..
cd ..
cd redux
mkdir actions
mkdir config
cd config
touch store.jsx
import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({
reducer: {},
})
export default store
cd ..
cd ..
cd components/
mkdir Navigation
mkdir Header
cd Navigation
touch Navigation.jsx
import { NavLink, Outlet } from 'react-router-dom'
export default function Navigation() {
return (
<nav>
<ul className='flex gap-8'>
<li>
<NavLink to='/'> Home </NavLink>
</li>
<li>
<NavLink to='/about'> About </NavLink>
</li>
<li>
<NavLink to='contact'> Contact </NavLink>
</li>
</ul>
<Outlet />
</nav>
)
}
cd ..
cd Header
touch Header.jsx
export default function Header() {
return (
<header>
<h1 className='font-bold text-3xl text-blue-600'> Webpack Starter </h1>
</header>
)
}
package.json - scripts
"scripts": {
"dev": "webpack serve --mode development",
"start": "webpack serve --mode development",
"build": "webpack --mode development"
},
index.html
<base href="/" />
Usage
- Run Dev Server (Port 3000)
- npm run dev
- Build for production
- npm run build
Live Demo | Turkish
1.0.1
5 months ago