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 Hello React!
;
};
ReactDOM.render(, document.getElementById("index"));
```
9. **index.html** should have:
```
React and Webpack4
```
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
================================================
React and Webpack4
================================================
FILE: src/index.js
================================================
import React from "react";
import ReactDOM from "react-dom";
const Index = () => {
return Hello React!
;
};
ReactDOM.render(, 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]
};