webpack是一个前端资源加载/打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。任何形式的资源都可以视作模块，通过loader去转换，比如css
之前介绍过npm的使用方法，这里不重复介绍
1、webpack的安装
安装命令：npm install webpack -g 测试：webpack -h
2、创建项目
1）mkdir app 创建 app目录 cd app 进入到app的目录下
2）在app目录添加runoob1.js文件 ，代码如下
document.write("hello world")；
3）在app目录下添加index.html的body下面添加如下的代码
,<script type="text/javascript" src="budle.js" charset="utf-8"></script>
4)使用webpack命令打包
webpack runoob1.js bundle.js（这句代码会生成bundle.js的文件）
5）之后会在将index文件在浏览器窗口打开会看到结果
3、1)创建runoob2.js文件，代码如下module.exports = "It works from runoob2.js"
2）更新runoob1.js
document.write(require("./runoob.js"));
3）使用webpack命令打包 webpack runoob1.js bundle.js
webpack根据模块的一栏关系进行静态分析，这些文件（模块）会被包含到bundle.js文件中
4、LOADER
webpack本身只能处理js模块，如果处理其他类就需要loader进行转换，我们现在app的文件夹下面创建一个style.css的文件,在使用css-loader和style-loader,
css-loader首先会遍历css文件,然后找到url()表达式处理他们,style-loader会把原来的css代码插入到页面的一个style标签当中
命令安装: cnpm install css-loader style-loader,执行完之后在node_modules的目录下面
比如:1)我们在你app的文件夹下面的style.css添加一行css代码 body { background-color:blue;}
2)修改runoob1.js的文件,代码如下
require("!style!css!./style.css");
document,write(require("./runoob2.js"));
3)使用webpack命令打包
webpack runoob1.js bundle.js
4)输出结果
注意：require CSS文件的时候都要写loader 前缀 ！style！css
安装插件 cnpm install webpack --save-dev
原文地址：http://www.runoob.com/w3cnote/webpack-tutorial.html
