Getting started guide with Webpack

Webpack (https://ankitkamboj18.medium.com/)

What is Webpack?

Why Webpack?

Installing Webpack

 npm install -g webpack

CLI (Command Line Interface)

console.log("Loading...");document.write("Well, hello there Webpack!!!!");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting started with Webpack: Part 1</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
webpack ./app.js bundle.js
webpack ./app.js bundle.js --watch
webpack ./app.js bundle.js -p

webpack.config.js

npm install style-loader css-loader babel-loader babel-core babel-preset-es2015 --save-dev
module.exports = {
entry: ['./app.js'],
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
loaders: ['babel'],
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
loaders: ['style-loader!css-loader']
}
]
}
}

entry

output

module loaders

npm install webpack-dev-server -g
webpack-dev-server

Software Developer