Webpackチュートリアル

tutorial) http://webpack.github.io/docs/tutorials/getting-started/

Step1: src.js -> dst.js

# install webpack
$ mkidr /path/to/dir
$ npm init
$ npm install webpack --save-dev

// js/entry.js
document.write('it works');

# entry.js -> bundle.js
$ node_modules/webpack/bin/webpack.js js/entry.js js/bundle.js

Step2: content.js -> entry.js -> bundle.js

// content.js
module.exports = 'it works';

// entry.js
document.write(require('./content.js'));

# content.js -> entry.js -> bundle.js
$ node_modules/webpack/bin/webpack.js js/entry.js js/bundle.js

Step3: CSS loading

$ npm install css-loader style-loader

/* css/style.css */
body {
    background-color: yellow;
}

// entry.js
require('../css/style.css');
...

$ node_modules/webpack/bin/webpack.js ./js/entry.js ./js/bundle.js --module-bind 'css=style!css'

Step4 Config file

// webpack.config.js
module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

$ node_modules/.bin/webpack

Tips

# Display progress
$ webpack --progress --colors

# Watch
$ webpack --watch