├── .gitignore
├── src
├── style.css
├── index.js
└── index.html
├── babel.config.json
├── package.json
├── readme.md
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Ignore node_modules file
2 | /node_modules
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: bisque;
3 | }
--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env"
4 | ]
5 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import "./style.css";
2 |
3 | console.log("Welcome to Webpack");
4 | const myFunc = () => {
5 | return true;
6 | }
7 |
8 | console.log(myFunc())
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Wbpack Exercise
7 |
8 |
9 | Hello webpack!
10 |
11 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "webpack --mode development",
8 | "start": "webpack serve --open",
9 | "build": "webpack --mode production",
10 | "watch": "webpack --watch"
11 | },
12 | "keywords": [],
13 | "author": "",
14 | "license": "ISC",
15 | "devDependencies": {
16 | "@babel/core": "^7.20.5",
17 | "@babel/preset-env": "^7.20.2",
18 | "babel-loader": "^9.1.0",
19 | "css-loader": "^6.7.2",
20 | "html-webpack-plugin": "^5.5.0",
21 | "mini-css-extract-plugin": "^2.7.1",
22 | "sass": "^1.56.1",
23 | "sass-loader": "^13.2.0",
24 | "style-loader": "^3.3.1",
25 | "webpack": "^5.75.0",
26 | "webpack-cli": "^5.0.0",
27 | "webpack-dev-server": "^4.11.1"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Webpack Setup
2 |
3 | ### Desctiption:
4 | This is simple but compleate package to get started with webpack and html, css, sass, javascript with babel setup.
5 |
6 | ### Usages:
7 | To setup this webpack project At first you have to open a terminal and clone this repo then cd to your folder then type this below command (make sure you have installed the nodejs on your computer)
8 | ```
9 | npm i --save-dev webpack webpack-cli webpack-dev-server @babel/core @babel/preset-env babel-loader style-loader css-loader sass-loader html-webpack-plugin mini-css-extract-plugin
10 | ```
11 | After Installing all the packages run this command ``` npm start ``` to start dev server and run ``` npm run build ``` to build your project and also you watch you file by typeing this command on your terminal ``` npm run watch ```
12 |
13 | If your like my project don't forget to give a star on this project.
14 |
15 | For more information please contact me on [Linkedin](https://www.linkedin.com/in/raihan2bd/)
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require("html-webpack-plugin");
2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
3 | const path = require('path');
4 |
5 | module.exports = {
6 | mode: 'development',
7 | entry: {
8 | index: "./src/index.js",
9 | },
10 | devServer: {
11 | static: "./dist"
12 | },
13 | output: {
14 | filename: "[name].bundle.js",
15 | path: path.resolve(__dirname, "dist"),
16 | clean: true,
17 | },
18 |
19 | module: {
20 | rules: [
21 | {
22 | test: /\.(s[ac]|c)ss$/i,
23 | use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
24 | },
25 | {
26 | test: /\.js$/i,
27 | exclude: /node_modules/,
28 | use: {
29 | loader: 'babel-loader',
30 | options: {
31 | presets: ['@babel/preset-env']
32 | }
33 | }
34 | }
35 | ]
36 | },
37 |
38 | plugins: [
39 | new HtmlWebpackPlugin({
40 | title: "Webpack Setup",
41 | template: path.resolve(__dirname, "src", "index.html")
42 | }),
43 | new MiniCssExtractPlugin()
44 | ],
45 | devtool: 'inline-source-map',
46 |
47 | optimization: {
48 | runtimeChunk: 'single',
49 | },
50 | }
--------------------------------------------------------------------------------