Webpack Basic -03 – Web Development

1.package.json

{
	"name": "webpack",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"builds": "node build.js"
	},
	"dependencies": {
		"cowsay": "^1.4.0"
	},
	"devDependencies": {
		"@babel/core": "^7.4.4",
		"@babel/preset-env": "^7.4.4",
		"babel-loader": "^8.0.5",
		"webpack": "^4.30.0"
	},
	"keywords": [],
	"author": "",
	"license": "ISC"
}

2.webpack.config.js

var webpack = require('webpack')
var path = require('path')

var config = {
	entry: './script.js',
	mode: 'development',
	module: {
		rules:[ {
			test:/\.js$/,
			exclude: /node_modules/,
			loader: 'babel-loader',
			options: {
				presets: ['@babel/preset-env']
			}			
		}
		]
	},
	output: {
		path: path.resolve('./'),
		filename: 'bundle.js'
	}
}

function onComplete (error, stats){
	if(error){
		console.error(error)
	} else {
		console.log(stats.toString())
	}
}

webpack(config, onComplete)

3.showMessage.js

const showMessage = message => {
	console.log('Message : ', message)
}
module.exports = showMessage

4.script.js

var showMessage = require("./showMessage");
showMessage('Greetings')

5.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack Sample</title>
</head>
<body>
    <h2>Welcome webpack</h2>
</body>
<script src="bundle.js"></script>
</html>

Webpack code splitting not working for NodeJs app

Post Views: 4

Leave a Reply Cancel reply