webpack step by step — for beginner

This story, we’ll get started working with `webpack` and setup a basic project. It’s seemly boring, but don’t worry, we have a lot of difficulties at behinds

1. What is webpack?

webpack is a module bundler. 
You can read more
here

2. Why webpack?

  • We have a bunch of different script tags and adding all these scripts. It’s looks messy and when it calls to the server to load all these scripts, that is worse for performance → Webpack gathers all these dependencies, and builds a bundle.
  • For the SPA, you can easily split your application into multiple files and load just the code the page requires — Code Splitting
  • Also we can transform React or ES6 into vanilla JavaScript, or preprocess SASS, LESS… to CSS.

….

3. Here we goooo

The first practice, we’ll use nodejs vs NPM

  • open C LI at your project (a empty folder)
  • npm init
  • npm i webpack --save-dev
  • npm i jquery-- save
  • create webpack.config.js like this:
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
}
  • create main.js like this:
var $ = require('jquery');
$('#root').html('Hello World!');
  • create index.html like this:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpack Demo</title>
</head>
<body>
<h1 id="root"></h1>
<script type="text/javascript" src="./bundle.js"></script>
</body>
</html>

add run script to package.json

"scripts": {
"start": "webpack --config webpack.config.js"
}

now, we run npm start

🎉 💥… And if have any problem, you can reference here 🍀 💦

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.