Skip to content

Instantly share code, notes, and snippets.

@sandeshdamkondwar
Last active June 18, 2020 21:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sandeshdamkondwar/dac345302680137eff520c98b96498bf to your computer and use it in GitHub Desktop.
Save sandeshdamkondwar/dac345302680137eff520c98b96498bf to your computer and use it in GitHub Desktop.
Minimal webpack setup using babel-loader, scss-loader & file-loader
{
"name": "setting_up_webpack4",
"version": "1.0.0",
"description": "setting up webpack4",
"main": "index.js",
"scripts": {
"build": "webpack",
"start:dev": "webpack-dev-server"
},
"repository": {
"type": "git",
"url": "https://github.com/wickedrahul/webpackFourSetup"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.12.0",
"sass-loader": "^7.2.0",
"style-loader": "^1.0.0",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.8.0"
}
}
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports ={
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use:{
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {minimize: true}
}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'file-loader',
}
]
},
{
test: /\.scss$/,
use: [
"style-loader",
"css-loader",
"sass-loader"
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename:'./index.html'
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment