Skip to content

Instantly share code, notes, and snippets.

@mburakerman
Last active September 26, 2022 17:32
Show Gist options
  • Save mburakerman/629783c16acf5e5f03de60528d3139af to your computer and use it in GitHub Desktop.
Save mburakerman/629783c16acf5e5f03de60528d3139af to your computer and use it in GitHub Desktop.
Webpack 4 config.js (SCSS to CSS and Babel) πŸ‘Œ The Simplest Usage πŸ‘Œ
{
"name": "webpack-sass",
"version": "1.0.0",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.11",
"node-sass": "^4.8.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.1"
}
}
/* === dont forget to import scss to main.js file === */
/* ===> import './main.scss'; <=== */
var path = require("path");
module.exports = {
entry: "./main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "/dist"
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: { presets: ["es2015"] }
}
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
}
]
}
};
@techyaura
Copy link

techyaura commented Sep 26, 2019

I am using GITHUB-LINK as a setup for webpack4 with scss, lazyloading, devserver. Working with the latest webpack version.

@wuubi
Copy link

wuubi commented Oct 23, 2019

Cheers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment