webpack入门
webpack，前端代码构建工具类（我是这么理解的），对于他的解释网上有很多，自行百度吧。这里只是对官方入门教程的一个中文版本而已：
1.安装webpack
前提，你的电脑需要安装node和npm（本博客有单独安装博文说明）
安装后在控制台中输入：
npm install webpack -g
2.通过控制台编译文件：
新建项目目录和名称为：webpack（可以在控制台中单独进入到项目根目录，npm install webpack局部安装模块）
之后新建两个文件：
js文件：entry.js ->
document.write("It works.");
hrml文件：index.html ->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
结构如下：
接着在控制台当前目录下输入：
webpack ./entry.js bundle.js
控制台此时应该输入如下：
此时目录结构中会生成bundle.js文件:
此时运行html文件，看下效果：
3.合并js文件：
新建content.js文件->
module.exports = "It works from content.js.";
entry.js再添加代码：
document.write(require("./content.js"));
此时文件结构： 
之后再编译文件
webpack ./entry.js bundle.js
此时运行html文件，看下效果：
4.加载css文件：
加载css文件还需要安装额外的npm模块
npm install css-loader style-loader
新建style.css文件->
body{background-color: #0086b3;}
更改entry.js文件->
document.write("It works.");
//+
require("!style!css!./style.css");
document.write(require("./content.js"));
此时编译下运行html文件，看下效果：
我们也可以再引入css文件的时候不写!style!css!,
即entry.js文件中的require("!style!css!./style.css");更改为require("./style.css");
之后编译命令也需要改变下：
webpack ./entry.js bundle.js --module-bind "css=style!css"
这里有个问题要注意下，我用git的控制台输入此段命令会无效，但用node控制台就可以，需注意：
此时在运行浏览器（我更改了css文件的背景色，已区分上一demo）：
5.通过配置文件执行项目文件的构建：
添加配置文件webpack.config.js->
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
其中path的参数是生成文件所在的地址目录，我这里设置成dist目录：
此时就很简单了，和gulp等构建工具一样只要在控制台中输入webpack即可
此时目录中会多出dist文件夹：
html中的链接也要改下
此时运行浏览器：
此时我们就算是webpack入门了，今天就先到这，有空再接着看进阶的教程并写成博文。
