webpack


$ npm install webpack -g
$ webpack -h

SINGLE FILE
 $ mkdir temp
vim entry.js
document.write("It works.");
$ webpack ./entry.js bundle.js
$ vim index.html
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>
TWO FILE
$ vim content.js
 module.exports = "It works from content.js.";
vim entry.js
var s = require("./content.js");
document.write(s);
$ webpack ./entry.js bundle.js
$ vim index.html
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>
 TWO FILE WITH CSS
$ npm install css-loader style-loader    #even if this is not a node project these modules are required to get this going
$ vim style.css
           body{background:yellow;}
$ vim content.js
 module.exports = "It works from content.js.";
vim entry.js
require("!style!css!./style.css");
var s = require("./content.js");
document.write(s);
$ webpack ./entry.js bundle.js
$ vim index.html
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>
 TWO FILE WITH CSS WITH CONFIG
$ npm install css-loader style-loader    #even if this is not a node project these modules are required to get this going
$ vim style.css
           body{background:yellow;}
$ vim content.js
 module.exports = "It works from content.js.";
vim entry.js
require("/style.css");
var s = require("./content.js");
document.write(s);
$ vim webpack.config.js
module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

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

show progress bar and color
$ webpack --progress --colors

We don’t want to manually recompile after every change…

webpack --progress --colors --watch

Even better is the development server.

npm install webpack-dev-server -g
webpack-dev-server --progress --colors

It binds a small express server on localhost:8080 which serves your static assets as well as the bundle (compiled automatically). It automatically updates the browser page when a bundle is recompiled (socket.io). Open http://localhost:8080/webpack-dev-server/bundle in your browser.

The dev server uses webpack’s watch mode. It also prevents webpack from emitting the resulting files to disk. Instead it keeps and serves the resulting files from memory.



$ webpack -p   # for minification


webpack to compile and watch backend stuff here.























Comments