一：安裝webpack和基本環境搭建
新建一個工作的文件夾（我取的名字叫Webpack）
打開命令行，cd進入該文件夾
//初始化一下npm
> E:\work\Webpack>npm init然后按照提示輸入這個項目的一些信息，不想填也可以一直按回車。
//安裝Webpack > E:\work\Webpack>npm install webpack --save-dev 如果這一步報錯，說明你沒有全局安裝webpack，全局安裝webpack的命令行是： npm install webpack -g
這樣一個webpack的基本框架就出來了，下面試一下它的打包功能
二：webpack的打包功能
在該工作文件夾下新建一個hello.js，隨便輸入一點函數
function hello(str){ alert(str); }然后在命令行中將這個hello.js打包為hello.bundle.js
> E:\work\Webpack>webpack hello.js hello.bundle.js //這句命令的意思是將hello.js打包，並且打包后的文件名稱為hello.bundle.js //在打包過程中會生成一些webpack需要的require
然后同樣的，在該項目下新建一個world.js，隨便輸入一點函數
function world(){ return{ //返回一個空 } }
接下來，在hello.js中將這個函數引用進來
require('./world.js'); //要注意文件的引用路徑，不然打包的時候會報錯。
在命令行中打包hello.js（和上面一樣的命令）
> E:\work\Webpack>webpack hello.js hello.bundle.js可以在命令行窗口中看到提示信息： 
其中：
Hash：表示這次操作的哈希值( 可以先不管 )
version：版本號
下面的信息主要表達的是： 這次打包中包含的文件，打開hello.bundle.js，可以在最后看到打包進去的代碼塊。
三：使用webpack打包css文件
接下來，我們在同樣的層級下新建一個style.css
body{ background-color: pink; margin: 0; padding: 20px; }
然后在hello.js中引入style.css
require('./style.css');
命令行中打包hello.js
> E:\work\Webpack>webpack hello.js hello.bundle.js
這時：你會發現報錯了，報錯信息： 
重要看錯誤信息里面的：
> You may need an appropriate loader to handle this file type.
說明webpack是不支持css這種類型的，如果要支持css需要依賴loader的，解決方式如下：
命令行輸入
> npm install css-loader style-loader --save-dev
回車安裝loader，安裝完畢之后，在hello.js中，要指定css文件的loader
//將之前寫的require('./style.css');改成下面的語句 require('css-loader!./style.css'); //這句話的意思是在使用這個css文件之前必須經過loader的處理
在命令行中打包hello.js
> E:\work\Webpack>webpack hello.js hello.bundle.js
顯示如上信息說明打包成功。
接下來，可以新建一個html文件，這個html文件中隨便寫點東西，並且要把打包后的文件hello.bundle.js文件引入進來。如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>測試webpack的Index測試</title> <script src="hello.bundle.js" type="text/javascript" charset="utf-8"></script> </head> <body> hello!!! </body> </html>
同時，我們需要在hello.js里面將剛剛寫的函數執行，如下：
require('./world.js'); require('css-loader!./style.css'); function hello(str){ alert(str); } hello('hello echo!'); //這是要添加的
打開命令行，運行一次webpack hello.js hello.bundle.js 
如上，打包完成。
然后在瀏覽器中打開剛剛寫的html文件，發現hello.js被執行了 
可是有一個問題，雖然我們執行了hello.js，但是在hello.js中引入的style.css卻並沒有被執行，這是因為在require的時候，除了指定css-loader，還需要指定style-loader，修改hello.js代碼如下：
require('./world.js'); require('style-loader!css-loader!./style.css'); function hello(str){ alert(str); } hello('hello echo!');
使用命令行再次運行下，打開html文件，就會發現css樣式已經被執行了。
打開瀏覽器的控制台查看源碼可以得到：
css-loader作用是讓webpack可以解析執行css文件，而style-loader是為了生成一個style標簽，並且將解析后的css文件插入到style中去
那么又會出現一個問題，是不是我們以后每次寫css，都要這樣重復的去reqiure？
在webpack中可以全局的指定命令，將hello.js中的require(‘style-loader!css-loader!./style.css’); 修改為之前的require(‘./style.css’);
然后打開命令行，輸入以下的命令
E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" //window下的css=style-loader!css-loader需要使用""括起來，如果是Mac的要變成單引號。
打開html文件，css樣式存在，說明指令已經生效。
可是還是有一個問題，就是當我們每一次修改文件的時候，都要重新執行一下命令行命令，可以說很麻煩了。
watch打包文件
所以在剛剛命令的基礎上，我們可以修改下，讓css自動更新，自動打包。命令如下：
> E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch我們來測試一下，打開hello.js，隨便更改一點內容，
require('./world.js'); require('./style.css'); function hello(str){ alert(str); } hello('hello echo!hhhhhh更改一下');這時，不用再次在命令行中輸入指令，直接打開瀏覽器刷新，可以發現剛剛修改的已經同步了。（感覺好玄幻哈哈哈哈哈）
四：webpack的其他指令
webpack還有很多其他的指令，比如：
1： - -progress 顯示打包過程的進度
E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --progress2：- -display-modules 顯示打包的模塊
E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --progress --display-modules3： - -display-reasons 顯示打包這些模塊的原因
E:\work\Webpack>webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-load