Webpack简单示例集合:webpack-demos

jopen 7年前

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.open-open.com/lib/view/home/1439647981567