Webpack簡單示例集合：webpack-demos

Webpack簡單示例集合：webpack-demos。

These demos are purposely written in a simple and clear style. You will find no difficulty in following them to learn the powerful tool.

How to use

First, install Webpack and webpack-dev-server globally.

$ npm i -g webpack webpack-dev-server

Then, clone the repo and install the dependencies.

$ git clone git@github.com:ruanyf/webpack-demos.git
$ cd webpack-demos
$ npm install

Now, play with the source files under the repo's demo* directories.

$ cd demo01
$ webpack-dev-server

Visit http://127.0.0.1:8080 with your browser.

What is Webpack

Webpack is a front-end build systems like Grunt and Gulp.

It can be used as a module bundler similar to Browserify, and do much more.

$ browserify main.js > bundle.js # be equivalent to $ webpack main.js bundle.js

Its configuration file iswebpack.config.js.

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

After havingwebpack.config.js, you can invoke Webpack without any arguments.

$ webpack

Some command-line options you should know.

• webpack– for building once for development
• webpack -p– for building once for production (minification)
• webpack --watch– for continuous incremental build
• webpack -d– to include source maps
• webpack --colors– for making things pretty

項目主頁：http://www.baiduhome.net/lib/view/home/1439647981567