Repository: pinglinh/simple_webpack_boilerplate
Branch: master
Commit: 0e74bdc2b53f
Files: 7
Total size: 4.5 KB
Directory structure:
gitextract_xwhs7m5d/
├── .babelrc
├── .gitignore
├── README.md
├── package.json
├── src/
│ ├── index.html
│ └── index.js
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": ["env", "react"]
}
================================================
FILE: .gitignore
================================================
/node_modules/
/dist
================================================
FILE: README.md
================================================
# Simple webpack boilerplate
A ready to use simple webpack boilerplate.
## Instructions
1. Clone this repo
2. Run `npm install`
3. Run `npm start`, **localhost:8080** will open up in your default browser
**If you prefer to install things yourself you can follow the instructions below**
1. Run `npm init` and type your answers to the questions or you can run `npm init -y` to say yes to every question - you will get default settings
2. Install the following dependencies:
```
npm i react react-dom -S
```
3. Install the following dev dependencies:
```
npm i babel-core babel-loader babel-preset-env babel-preset-react css-loader html-webpack-plugin style-loader webpack webpack-cli webpack-dev-server -D
```
4. Update your scripts to the following:
```
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
```
5. Create **.babelrc** file with the following configurations:
```
{
"presets": ["env", "react"]
}
```
5. Create **webpack.config.js** file with the following configurations:
```
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlWebpackPlugin]
};
```
7. Create **src** folder with **index.js** and **index.html** file.
8. **index.js** should have:
```
import React from "react";
import ReactDOM from "react-dom";
const Index = () => {
return <div>Hello React!</div>;
};
ReactDOM.render(<Index />, document.getElementById("index"));
```
9. **index.html** should have:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React and Webpack4</title>
</head>
<body>
<section id="index"></section>
</body>
</html>
```
10. Create **.gitignore** file and input **/node_modules/** and **/dist**.
================================================
FILE: package.json
================================================
{
"name": "simple_webpack_boilerplate",
"version": "1.0.0",
"description": "A ready to use simple webpack boilerplate",
"main": "src/index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
"author": "pinglinh",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.0",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.8"
},
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2"
}
}
================================================
FILE: src/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React and Webpack4</title>
</head>
<body>
<section id="index"></section>
</body>
</html>
================================================
FILE: src/index.js
================================================
import React from "react";
import ReactDOM from "react-dom";
const Index = () => {
return <div>Hello React!</div>;
};
ReactDOM.render(<Index />, document.getElementById("index"));
================================================
FILE: webpack.config.js
================================================
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlWebpackPlugin]
};
gitextract_xwhs7m5d/ ├── .babelrc ├── .gitignore ├── README.md ├── package.json ├── src/ │ ├── index.html │ └── index.js └── webpack.config.js
Condensed preview — 7 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (5K chars).
[
{
"path": ".babelrc",
"chars": 34,
"preview": "{\n \"presets\": [\"env\", \"react\"]\n}\n"
},
{
"path": ".gitignore",
"chars": 21,
"preview": "/node_modules/\n/dist\n"
},
{
"path": "README.md",
"chars": 2541,
"preview": "# Simple webpack boilerplate\n\nA ready to use simple webpack boilerplate.\n\n## Instructions\n\n1. Clone this repo\n2. Run `"
},
{
"path": "package.json",
"chars": 739,
"preview": "{\n \"name\": \"simple_webpack_boilerplate\",\n \"version\": \"1.0.0\",\n \"description\": \"A ready to use simple webpack boilerpl"
},
{
"path": "src/index.html",
"chars": 294,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, in"
},
{
"path": "src/index.js",
"chars": 184,
"preview": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nconst Index = () => {\n return <div>Hello React!</div>;\n};"
},
{
"path": "webpack.config.js",
"chars": 796,
"preview": "const HtmlWebPackPlugin = require(\"html-webpack-plugin\");\n\nconst htmlWebpackPlugin = new HtmlWebPackPlugin({\n template:"
}
]
About this extraction
This page contains the full source code of the pinglinh/simple_webpack_boilerplate GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 7 files (4.5 KB), approximately 1.4k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.