[
{
"path": ".babelrc",
"content": "{\n \"presets\": [\"env\", \"react\"]\n}\n"
},
{
"path": ".gitignore",
"content": "/node_modules/\n/dist\n"
},
{
"path": "README.md",
"content": "# Simple webpack boilerplate\n\nA ready to use simple webpack boilerplate.\n\n## Instructions\n\n1. Clone this repo\n2. Run `npm install`\n3. Run `npm start`, **localhost:8080** will open up in your default browser\n\n**If you prefer to install things yourself you can follow the instructions below**\n\n1. 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\n2. Install the following dependencies:\n```\nnpm i react react-dom -S\n```\n3. Install the following dev dependencies:\n```\nnpm 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\n```\n4. Update your scripts to the following:\n```\n\"start\": \"webpack-dev-server --mode development --open\",\n\"build\": \"webpack --mode production\"\n```\n5. Create **.babelrc** file with the following configurations:\n```\n{\n \"presets\": [\"env\", \"react\"]\n}\n```\n5. Create **webpack.config.js** file with the following configurations:\n```\nconst HtmlWebPackPlugin = require(\"html-webpack-plugin\");\n\nconst htmlWebpackPlugin = new HtmlWebPackPlugin({\n template: \"./src/index.html\",\n filename: \"./index.html\"\n});\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: {\n loader: \"babel-loader\"\n }\n },\n {\n test: /\\.css$/,\n use: [\n {\n loader: \"style-loader\"\n },\n {\n loader: \"css-loader\",\n options: {\n modules: true,\n importLoaders: 1,\n localIdentName: \"[name]_[local]_[hash:base64]\",\n sourceMap: true,\n minimize: true\n }\n }\n ]\n }\n ]\n },\n plugins: [htmlWebpackPlugin]\n};\n```\n7. Create **src** folder with **index.js** and **index.html** file.\n8. **index.js** should have:\n```\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nconst Index = () => {\n return Hello React!
;\n};\n\nReactDOM.render(, document.getElementById(\"index\"));\n```\n9. **index.html** should have:\n```\n\n\n\n \n \n \n React and Webpack4\n\n\n \n\n\n```\n10. Create **.gitignore** file and input **/node_modules/** and **/dist**.\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"simple_webpack_boilerplate\",\n \"version\": \"1.0.0\",\n \"description\": \"A ready to use simple webpack boilerplate\",\n \"main\": \"src/index.js\",\n \"scripts\": {\n \"start\": \"webpack-dev-server --mode development --open\",\n \"build\": \"webpack --mode production\"\n },\n \"author\": \"pinglinh\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"babel-core\": \"^6.26.3\",\n \"babel-loader\": \"^7.1.5\",\n \"babel-preset-env\": \"^1.7.0\",\n \"babel-preset-react\": \"^6.24.1\",\n \"css-loader\": \"^1.0.0\",\n \"html-webpack-plugin\": \"^3.2.0\",\n \"style-loader\": \"^0.23.0\",\n \"webpack\": \"^4.19.1\",\n \"webpack-cli\": \"^3.1.1\",\n \"webpack-dev-server\": \"^3.1.8\"\n },\n \"dependencies\": {\n \"react\": \"^16.5.2\",\n \"react-dom\": \"^16.5.2\"\n }\n}\n"
},
{
"path": "src/index.html",
"content": "\n\n\n \n \n \n React and Webpack4\n\n\n \n\n\n"
},
{
"path": "src/index.js",
"content": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nconst Index = () => {\n return Hello React!
;\n};\n\nReactDOM.render(, document.getElementById(\"index\"));\n"
},
{
"path": "webpack.config.js",
"content": "const HtmlWebPackPlugin = require(\"html-webpack-plugin\");\n\nconst htmlWebpackPlugin = new HtmlWebPackPlugin({\n template: \"./src/index.html\",\n filename: \"./index.html\"\n});\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: {\n loader: \"babel-loader\"\n }\n },\n {\n test: /\\.css$/,\n use: [\n {\n loader: \"style-loader\"\n },\n {\n loader: \"css-loader\",\n options: {\n modules: true,\n importLoaders: 1,\n localIdentName: \"[name]_[local]_[hash:base64]\",\n sourceMap: true,\n minimize: true\n }\n }\n ]\n }\n ]\n },\n plugins: [htmlWebpackPlugin]\n};\n"
}
]