webpack簡介
webpack是一種當下比較火熱的前端資源模塊化管理和打包工具，前端開發所用到的幾乎所有資源在webpack下面都可以當作模塊來處理。通過loader的轉換，你可以把CSS、JS、SASS等資源模塊化，同時webpack提供了dv server 來幫助開發者進行本地環境的構建。下面就從安裝開始，使用webpack做一個demo吧~
安裝
由於webpack是依賴Node.js環境的，所以首先要安裝 Node.js，一路next，安裝好後 打開cmd(windows下)，輸入 npm install webpack -g -g這裏代表了全局安裝。
由於npm服務在外國 所以這裏推薦改用淘寶鏡像 ，命令提示符執行
npm install cnpm -g --registry=https://registry.npm.taobao.org 注意：安裝完後查看其版本號cnpm -v，有提示則安裝成功 cnpm跟npm用法完全一致，只是在執行命令時將npm改爲cnpm。
開始入門
npm init(項目的開始)
在任意磁盤目錄下新建一個目錄demo，在此路徑下打開cmd，輸入npm init 如下圖，會讓你輸入一些作者信息、項目版本等等，可以一直按回車不填。
然後你就會發現在目錄下有一個package.json的文件，這個文件是管理項目依賴的，項目所依賴的環境都會以json的形式寫入這個文件，當我們要在一個新環境搭建項目時，有了這個package.json，我們直接在項目目錄下執行 npm install 那麼就會自動安裝項目的依賴。
安裝依賴
項目路徑下執行 npm install webpack --save-dev 雖然已經在本地安裝了全局的webpack，但是我們最好還是在項目路徑下安裝一下webpack,這樣我們可以使用項目版本的webpack。以後我們所需要的依賴，也是以此方式安裝 即 npm install xxx --save-dev
目錄結構
在demo路徑下新建build文件夾 在裏面新建一個index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>在根目錄創建src文件夾，分別在src裏再建立images、js、scss文件夾。
在根目錄下創建webpack.config.js。
這個就是webpack的配置文件，裏面規定了入口文件，出口文件，加載的loader等等。
下載我們就以讀取Json數據、使用sass、圖片壓縮爲例子介紹整個webpack的配置。
首先是整個webpack配置文件
我們需要的依賴 “css-loader”,”file-loader”,”json-loader”,”node-sass”, “sass-loader”,”style-loader”,”url-loader”,”webpack-dev-server”，依照上面的方法安裝上面的依賴。
loader是按照從右至左的順序執行的，比如scss文件，先由sass-loader處理，然後由css-loader處理，最後由style-loader處理。
然後在src下創建hello.json
{
"greetText": "Hi there and greetings from JSON!"
}在js目錄下創建Greeter.js
var hello =require('../hello.json'); //引入json文件
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = hello.greetText;
return greet;
};scss目錄下創建main.scss(我在images文件夾中用了一個圖片)
html {
box-sizing: border-box;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background:blue;
#root{
color:red;
}
background:url(../images/1.jpg);
}在js目錄下創建入口文件main.js.
import '../scss/main.scss'; //導入scss文件
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());由於我們已經配置了webpack-dev-server 這會使webpack監聽整個前端代碼的變動並實時刷新，無需每次都要重新執行webpack命令。
在根目錄執行webpack-dev-server
打開瀏覽器輸入 localhost:8080,神奇的事情發生啦。（請忽略它的醜）
我們得到了json數據，並且scss文件也應用了，打開開發者工具 你會發現 我們的圖片以base64的形式加載的，這樣更省空間。
接着我們改動一下hello.json 並保存，你會發現頁面會自動刷新一下，並且改動已經生效了！（webpack-dev-server 還有Hot Module Replacement 即 熱模塊模式 會異步的打包更改後的代碼，並異步刷新瀏覽器 你並不會感覺到瀏覽器刷新了 ，但是它確實刷新了！webpack-dev-server --inline --hot 這個操作會增加打包後的js大小）
webpack的魅力在於一切都可以模塊化，而且有豐富的loader供你使用，大家一起來學習吧~
結束語
這篇文章其實寫的很粗糙,主要是講了webpack的一些配置，它還有很多loader可以使用，大家可以根據情況自己配置。這是我第一篇文章， 希望大家多多支持，多多提意見，後面我會把它改動一些，讓它更精美。
項目demo我已經上傳 github https://github.com/yangzhennupt/webpackLearn 歡迎大家star。
安裝node環境後 執行npm install 即可添加所有依賴 ，謝謝大家，接下來我會抽時間寫一片gulp教程，也是前端腳手架的環境搭配。然後也會有gulp+webpack搭配使用，敬請期待。