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;