Webpack 入門(一)：安裝 / 打包 / 命令列
*注：以下操作的前提是已全域性安裝node 和 webpack
一：安裝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-loader" --progress --display-modules --display-reasons