jopen 7年前


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 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