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入門了，今天就先到這，有空再接着看進階的教程並寫成博文。