At first I was scared with how difficult to setup a project with webpack in it, so much that I'd think to just move on and forget about it. But soon after this project is started, things change.
This is my first project running with webpack. Open it right in your browser now.
At first look it may look very simple, then try to add some loaders and see if it changes your mind.
Building Javascript with webpack is optional. If you happen to happily use Codepen and somehow your code get too large and burden and wishing to split it, Webpack might be right tool. Otherwise stick with the easy one 😉
Yes, this is a fresh new hot spaghetti project and a lot ingredients are missing. If the generated config or the explanation in the website doesn't feel good for you please slap me with issues.
First figure what frameworks and tools that your project will use. Babel? Jsx? Sass? Typescript? Vue? I got you covered. Just pick what necessary.
On the right side, you'll be served with two things: the webpack.config.js and its npm depedencies.
First on new empty folder, open a terminal and run:
npm init
Answer few questions, then install those npm depedencies:
npm install webpack webpack-dev-server ... ... ... ... --save-dev
Tip: Also add libraries that necessary to your project there.
It might take a while, so lets prepare other stuff, like pasting the contents of webpack.config.js to your project:
module.exports = {
entry: 'main.js',
output: {
filename: 'bundle.js'
}
/* whatever the webpack.config.js content you have */
}and our main.js:
document.write('Hello, World!')and our index.html:
<html>
<head>
<title>My App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>Replace these
main.jsorbundle.jsif you've change these in your config!
After that, wait until it's done. Then add these scripts in your package.json:
{
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
}
}That's it! now run npm run dev and open localhost:8080. See the Hello, World!? Congratulation 🎉
Don't forget to try require() to other javascript or files that you're set with your loaders. If you want to go big, don't forget to set your source to src/ and output to dist/ (or your own convention, its your project anyway!).
Webpack is of course, very powerful. Some features (and loaders/plugins) can't get into this demo because it's technically difficult to do (but easy for human). Some other yet important concept (e.g. development vs production mode) is not handled in this project (but you can see how this project handles it). Use human creativity to unlock webpack full potential!
One more thing is that, if your project targeting a framework, have a look to its boilerplate. Projects like create-react-app for React and vue-cli for Vue.js is an excellent boilerplate tool and have preconfigured webpack config out of the box, often packed with many features included. Have a look if you don't do it yet.
This project changes my mind. Everyone who doing javascript in 2018 should give webpack a try!
This project development vs. production config. <- Real world example.
Array Explorer by @sdras <- Not mine, but this is where I got the [inspiration]. Check it out!
Webpack Docs <- Impossible to do this project without dangling with documentations.
Awesome Webpack <- Nothing beats the community lists!
My Twitter <- ^_^