basic-webpack-scss

readme.md

basic-webpack-scss

gist version

Minimum Webpack configuration SCSS with hot module reloading for development

Features:

• Webpack V4.x
• Use SCSS out of the box
• Hot module reloading for development (guide)
• included Reset CSS based on CSS-Tricks Article, a Bootstrap 4's Reboot: CSS version that compiled by CSS-Tricks

usage

• create folder /src and add file /src/app.js for main entry
• create file src/style.scss
• create folder /dist and add file /dist/index.html include
• <script src="app.jc"></script> before body close tag
• npm start to run development using webpack dev server

package.json

{
  "name": "basic-webpack-scss",
  "version": "1.0.0",
  "description": "Minimum Webpack SCSS for development",
  "main": "",
  "scripts": {
    "build": "webpack --watch",
    "start": "webpack-dev-server --open"
  },
  "author": "Herwindo Artono",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        app: './src/app.js'
    },
    mode: 'development',
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    }
}