Getting started ES2015 and SASS(plus autoprefixer) with Webpack 4

πŸ‘‘ Goal

Create a ES2015 + Sass project with Webpack 4

πŸŽ“ Agenda

  1. Setup webpack
  2. Add HtmlWebpackPlugin
  3. Add webpack-dev-server
  4. Add Babel
  5. Add (SASS) SASS
  6. Add MiniCssExtractPlugin
  7. Add postcss-loader and autoprefixer

🚩 Step 1: Setup webpack

yarn init -y

yarn add -D webpack webpack-cli

πŸ‘‰ Create webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
// webpack.config.js
const path = require('path');

const outputPath = path.resolve(__dirname, 'dist');

module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: outputPath,
filename: 'main.js'
}
};

πŸ‘‰ Add scripts to package.json file

1
2
3
4
5
6
7
// package.json

...
"scripts": {
"start": "webpack"
}
...

πŸ‘‰ Create src directory and add index.js file

1
2
3
// index.js

console.log('hoe');

βœ”οΈ TEST
yarn start ➑️ dist directory created with main.js file in it

πŸ’‘ Git setup

git init

πŸ‘‰ Create .gitignore file

1
2
3
4
// .gitignore

node_modules
dist

🚩 Step 2: HtmlWebpackPlugin

yarn add -D html-webpack-plugin

πŸ‘‰ Edit webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
// webpack.config.js

...
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
new HtmlWebpackPlugin({
template: './src/template.html',
hash: true
})
]
...

πŸ‘‰ Create template.html file in src directory

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- template.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>
</head>
<body>
<h1>hoe</h1>
</body>
</html>

βœ”οΈ TEST
yarn start ➑️ index.html file created in dist directory

🚩 Step 3: Add webpack-dev-server

yarn add -D webpack-dev-server

πŸ‘‰ Edit webpack.config.js

1
2
3
4
5
6
7
// webpack.config.js

...
devServer: {
contentBase: outputPath
}
...

πŸ‘‰ Edit package.json file

1
2
3
4
5
6
7
8
// package.json

...
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
},
...

βœ”οΈ TEST
yarn start starts webpack-dev-server and the project is running at http://localhost:8080/

🚩 Step 4: Add Babel

yarn add -D babel-loader @babel/core @babel/preset-env

πŸ‘‰ Create .babelrc in root

1
2
3
4
5
// .babelrc

{
"presets": ["@babel/preset-env"]
}

πŸ‘‰ Edit webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
// webpack.config.js

...
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader'
}
]
}
...

πŸ‘‰ Add sub.js in src

1
2
3
// sub.js

export const msg = 'hoe';

πŸ‘‰ Edit index.js

1
2
3
4
5
// index.js

import { msg } from './sub';

console.log(msg);

βœ”οΈ TEST
yarn start –> open http://localhost:8080/ and hoe is logged in console.

🚩 Step 5: Add SASS(SCSS)

yarn add -D style-loader css-loader sass-loader node-sass

πŸ‘‰ Create style.scss in src

1
2
3
4
5
6
7
// style.scss

$bg-color: tomato;

body {
background-color: $bg-color;
}

πŸ‘‰ Edit index.js

1
2
3
4
5
// index.js

...
import './style.scss';
...

πŸ‘‰ Edit webpack.config.js

Add a new test in rules

1
2
3
4
5
6
7
8
// webpack.config.js

...
{
test: /\.(sc|c)ss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
...

βœ”οΈ TEST
yarn start –> open http://localhost:8080/ and background color is πŸ…tomato.

🚩 Step 6: Add MiniCssExtractPlugin

yarn add -D mini-css-extract-plugin

πŸ‘‰ Remove style-loader

yarn remove style-loader

πŸ‘‰ Edit webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...
{
test: /\.(sc|c)ss$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options: {} },
'css-loader',
'sass-loader'
]
}
...
plugins: [
new MiniCssExtractPlugin({}),
new HtmlWebpackPlugin({
template: './src/template.html',
hash: true
})
]
...

βœ”οΈ TEST
yarn build –> main.css is created in dist directory.

🚩 Step 7: Add Autoprefixer

yarn add -D postcss-loader and autoprefixer

πŸ‘‰ Create postcss.config.js in root

1
2
3
4
5
// postcss.config.js

module.exports = {
plugins: [require('autoprefixer')({ grid: true })]
};

πŸ‘‰ Edit webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
// webpack.config.js

...
{
test: /\.(sc|c)ss$/,
use: [
{ loader: MiniCssExtractPlugin.loader, options: {} },
'css-loader',
'postcss-loader',
'sass-loader'
]
}
...

πŸ‘‰ Edit style.scss

1
2
3
4
5
6
7
// style.scss

...
body {
background-color: $bg-color;
display: grid;
}

βœ”οΈ TEST
yarn start –> open http://localhost:8080/ and <body/> has β€˜display: -ms-grid’ and β€˜display: grid’.

image

*This project can be found;