/webpack_example

Primary LanguageJavaScript

Webpack example

Getting started

First, I followed Webpack's getting started tutorial.

I created a new npm project and installed webpack

npm init
npm install --save-dev webpack

I then created two Javascript files to demonstrate how to use Javascript that is defined in another module.

// content.js
module.exports = "It works from content.js.";
// entry.js
document.write(require("./content.js"));

I then compiled this into a bundle file by running,

./node_modules/webpack/bin/webpack.js ./entry.js bundle.js

I tested the bundle.js file by referencing it in an html file and viewing this file in my browser.

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
  </body>
</html>

Viewing index.html in a browser simple displays It works from content.js..

Webpack with Backbone

I wanted to create a simple project using Backbone.js so I installed backbone along with jQuery and Underscore.

npm install --save-dev backbone
npm install --save-dev jquery
npm install --save-dev underscore

I created a new node project and created directory name src for my src files to live in and a directory called www, which would contain the files that could be deployed to a web server. These directories would end up looking like the following.

> $ tree src/ www/
src/
├── index.html
├── index.js
├── MainView.html
└── MainView.js
www/
├── bundle.js
└── index.html

I copied the same index.html file from the simple example above into the src directory. As you can see the index.html doesn't have to do a lot, just reference the bundle.js.

I created an index.js file, which would act as an entry to my application, and a Backbone.js view.

// index.js
var $ = require('jquery');
var MainView = require('./MainView');

mainView = new MainView();
$('body').append(mainView.render().el);
// MainView.js
var Backbone = require('backbone');
var _ = require('underscore');

module.exports = Backbone.View.extend({

  tagName: "div",

  template: require('./MainView.html'),

  events: {
  },

  initialize: function() {
  },

  render: function() {
	this.$el.html(
        this.template({ 'msg': 'This is the Main View' }));
	return this;
  }

});
// MainView.html
<h1>{{ msg }}</h1>

As I wanted to keep the template file in a separate file I needed to install a loader

npm install --save-dev mustache-loader

and configure it's use in the webpack.config.js,

// webpack.config.js
...
    module: {
        loaders: [{
            test: /\.html$/,
            loader: 'mustache',
        },],
    },
...

I also added some config to the webpack.config.js to help it resolve paths, know the entry to my app and where I'd like my bundle.js file saved to,

// webpack.config.js
...
    context: __dirname + '/src',
    entry: "./index",
    output: {
        path: __dirname + '/www',
        filename: "bundle.js"
    },
...

The final step was to copy the index.html file from src/ to www/ as part of the build. The easiest way for me to do this (without adding new dependencies was to add a script to do this in the package.json.

// package.json 
...
  "scripts": {
    "build": "node ./node_modules/webpack/bin/webpack.js && cp ./src/index.html ./www/"
...

I built the bundle via the command,

npm run build

Then opened the www/index.html file in a browser and could see "This is the Main View".

Next steps

Other useful things that Webpack can do: