Webpack简单示例集合:webpack-demos
jopen
9年前
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