在用webpack之前... 或說沒有實現組件化之前的web1.0時代!
最終邁向web2..0之后的時代!
===============華麗的分割線==================
安裝步驟有兩步:
1. 首先安裝 全局
npm install -g webpack
2. 再安裝局部
npm install --save-dev webpack為了控制版本不一的情況，實際情況就是這樣.
安裝好了就是這樣(全局安裝即每個目錄都可以得到你安裝的信息) 
好了下一步操作!==錯了。
要先npm init生成一系列信息！本地安裝： npm install package-name
全局全裝： npm install -g package-name
升級： npm update
卸載： npm uninstall
通過package.json
刪除不需要的依賴信息：
{
"name":"myPackage",
"version":"0.0.1",
"dependencies":{
"abc":">0.0.2"}
}
好了，卸載npm包管理！
再次生產：npm init
一股勁的回車就行，目測！
mdzz，不行，乖乖！
乖乖，只有第一個名字不能為空，其余回車跳過就行！！！
搞定（上面的信息僅是測試，是不准備發布的）
我的測試目錄是這樣的!
在這里我不浪費vscode的目錄結構而去使用Linux tree了
好了，填坑（代碼）
index.html生產目錄結構：
一個！產生的目錄結構
Emment神器！
# {extry file}出填寫入口文件的路徑，本文中就是上述main.js的路徑，# {destination for bundled file}處填寫打包文件的存放路徑# 填寫路徑的時候不用添加{}
webpack {entry file} {destinationforbundled file}
webpack app/main.js public/bundle.js
后面的打包文件可以不存在！ 執行命令后自動生成！
打包成功一個！
其實，通過loaders和plugs最好了!
下面配置文件：
在當前目錄下：webpack
即可通過配置文件生成：
更快捷的執行打包任務
注：package.json中的script會安裝一定順序尋找命令對應位置，本地的node_modules/.bin路徑就在這個尋找清單中，所以無論是全局還是局部安裝的Webpack，你都不需要寫前面那指明詳細的路徑了。
npm的start命令是一個特殊的腳本名稱，其特殊性表現在，在命令行中使用npm start就可以執行其對於的命令，如果對應的此腳本名稱不是start，想要在命令行中運行時，需要這樣用npm run {script name}如npm run build，我們在命令行中輸入npm start試試，輸出結果如下：
這時候1條命令即可解決：
npm start
我們選擇中小項目用的源碼地圖！
使用webpack構建本地服務器
先安裝到本地：
npm install --save-dev webpack-dev-server
開啟服務器兩個步驟：
1. 配置package.json
2. 配置webpack.config.js(webpack.conf.js)
最后npm run server !
OK，自動彈出瀏覽器並進入！
Loaders
鼎鼎大名的Loaders登場了！
注 由於webpack3.*/webpack2.*已經內置可處理JSON文件，這里我們無需再添加webpack1.*需要的json-loader。在看如何具體使用loader之前我們先看看Babel是什么？
安裝Babel:
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
再安裝：react和react-dom
npm install --save react react-dom
一切皆模塊
Webpack有一個不可不說的優點，它把所有的文件都都當做模塊處理，JavaScript代碼，CSS和fonts以及圖片等等通過合適的loader都可以被處理。
CSS
webpack提供兩個工具處理樣式表，css-loader 和 style-loader，二者處理的任務不同，css-loader使你能夠使用類似@import 和 url(...)的方法實現 require()的功能,style-loader將所有的計算后的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。
npm install --save-dev style-loader css-loader
請注意這里對同一個文件引入多個loader的方法。
我們這里例子中用到的webpack只有單一的入口，其它的模塊需要通過 import, require, url等與入口文件建立其關聯，為了讓webpack能找到”main.css“文件，我們把它導入”main.js “中，如下
CSS module
在過去的一些年里，JavaScript通過一些新的語言特性，更好的工具以及更好的實踐方法（比如說模塊化）發展得非常迅速。模塊使得開發者把復雜的代碼轉化為小的，干凈的，依賴聲明明確的單元，配合優化工具，依賴管理和加載管理可以自動完成。
不過前端的另外一部分，CSS發展就相對慢一些，大多的樣式表卻依舊巨大且充滿了全局類名，維護和修改都非常困難。
最近有一個叫做 CSS modules 的技術就意在把JS的模塊化思想帶入CSS中來，通過CSS模塊，所有的類名，動畫名默認都只作用於當前模塊。Webpack從一開始就對CSS模塊化提供了支持，在CSS loader中進行配置后，你所需要做的一切就是把”modules“傳遞到所需要的地方，然后就可以直接把CSS的類名傳遞到組件的代碼中，且這樣做只對當前組件有效，不必擔心在不同的模塊中使用相同的類名造成沖突。具體的代碼如下
