Install dependencies and launch webpack process:
npm install
npm start
Finally, launch your editor of choice and edit index.js, index.scss, and index.html.
Created
March 3, 2020 16:33
-
-
Save jbgutierrez/3582b432b353023d510dadb8673ffd6e to your computer and use it in GitHub Desktop.
Exercise skeleton
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>Document</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha256-gvEnj2axkqIj4wbYhPjbWV7zttgpzBVEgHub9AAZQD4=" crossorigin="anonymous" /> | |
| </head> | |
| <body> | |
| <!-- TODO: add markup --> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import "./index.scss"; | |
| // TODO: add behaviour |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // TODO: add styles |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "content", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1", | |
| "start": "webpack-dev-server --mode=development", | |
| "build": "webpack -p" | |
| }, | |
| "author": "", | |
| "license": "ISC", | |
| "devDependencies": { | |
| "@babel/core": "^7.8.6", | |
| "babel-loader": "^8.0.6", | |
| "css-loader": "^3.4.2", | |
| "fibers": "^4.0.2", | |
| "html-loader": "^0.5.5", | |
| "html-webpack-plugin": "^3.2.0", | |
| "mini-css-extract-plugin": "^0.9.0", | |
| "node-sass": "^4.13.1", | |
| "sass": "^1.26.2", | |
| "sass-loader": "^8.0.2", | |
| "webpack": "^4.42.0", | |
| "webpack-cli": "^3.3.11", | |
| "webpack-dev-server": "^3.10.3" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const path = require('path'); | |
| const MiniCssExtractPlugin = require("mini-css-extract-plugin"); | |
| const HtmlWebpackPlugin = require("html-webpack-plugin"); | |
| module.exports = { | |
| entry: path.resolve(__dirname, "index.js"), | |
| output: { | |
| path: path.resolve(__dirname, "dist"), | |
| filename: "main.js" | |
| }, | |
| devServer : { | |
| hot: true, | |
| compress: false, | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.(js|jsx)$/, | |
| use: { | |
| loader: "babel-loader", | |
| }, | |
| }, | |
| { | |
| test: /\.(sa|sc|c)ss$/, | |
| use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], | |
| }, | |
| { test: /\.(html)$/, use: "html-loader" }, | |
| ], | |
| }, | |
| plugins: [ | |
| new MiniCssExtractPlugin(), | |
| new HtmlWebpackPlugin({ | |
| filename: `index.html`, | |
| template: `./index.html`, | |
| inject: true | |
| }) | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment