Beginner’s guide to Webpack
Or what I wish I knew when starting with Wepback.
Click here to go to the final Github repo.
We are using Webpack 1.x. Webpack 2 will not work with this tutorial. Click here to view the Webpack changelog.
Webpack is the latest and greatest in front-end development tools. It is a module bundler that works great with the most modern of front-end workflows including Babel, ReactJS, CommonJS, among others. As a beginner to Webpack, this is what I have learned.
This tutorial has been updated to use Babel 6
Getting Started
Webpack Conventions
- Webpack works best with NPM, not Bower
- Uses a module system (AMD, CommonJS, ES6)
Installing Webpack globally:
npm install webpack -gThe most basic of builds:
In your root directory create 2 files: index.html & app.js
In app.js:
document.write('welcome to my app');console.log('app loaded');
In index.html:
<html>
<body>
<script src="bundle.js"></script>
</body>
</html>Open your console, and run:
webpack ./app.js bundle.jsThe above command uses the webpack command (webpack) to reference our app file (./app.js) and…
