Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Exercise skeleton

Getting Started

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.

<!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>
import "./index.scss";
// TODO: add behaviour
// TODO: add styles
{
"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"
}
}
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
You can’t perform that action at this time.