Webpack(1) --- 介紹
一、Webpack是什麼、為什麼要使用它
簡單來說，Webpack是一個打包工具。
站在2018年的角度，成為一個優秀的前端工程師，除了要會寫頁面樣式和動態效果之外，還需要會用主流的單頁面框架、Node.js、簡單的前端的性能優化等等。加上現在一部分伺服器的邏輯移到了前端上，所以實際上前端的複雜度也是提升了很多。
而Webpack可以幫助我們完成一些任務。比如js壓縮、css壓縮、編譯模板文件等等，從而減少前端的工作量。當然，Webpack功能很強大，能幫我們完成的工作遠遠不止這些。
下面，讓我們慢慢了解Webpack吧~
二、安裝
① Webpack的運行需要依賴Node.js，因此需要先安裝Node.js。
中文網下載地址：下載 | Node.js 中文網
安裝完成之後在命令行窗口輸入下面兩行命令，若有出現版本號則安裝成功。
$ node -v
$ npm -v
② 接著就可以通過npm（一個基於Node.js的包管理工具）來安裝Webpack咯~
首先，通過下面的一行命令先生成package.json
$ npm init
③ 接著就能通過npm完成webpack的安裝啦
因為npm的源在國外，所以安裝速度可能比較慢。建議大家可以用淘寶的npm鏡像。但是要注意的一點是，淘寶npm鏡像中有一些包會不太一樣（一般來說不影響使用）
淘寶 NPM 官網：淘寶 NPM 鏡像
通過下面這行代碼即可完成cnpm的配置
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
通過下面兩行代碼即可完成webpack的安裝
// 要是不想使用淘寶的npm鏡像，就用npm代替cnpm
$ cnpm install -D webpack
$ cnpm install -D webpack-cli
④ 安裝完之後在package.json同級目錄新建一個webpack.config.js文件。然後再在package.json中增加一個「scripts」配置項。
// 這是package.json
{
"name": "zhihu_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rehellinen/zhihu_demo.git"
},
"author": "",
"license": "ISC"
}
接著在命令行中輸入下面的這行代碼就可以啟動webpack啦。
$ npm run build
但是，因為我們的webpack.config.js是空的，因此運行時會報錯。具體配置會在下一節課開始講。
三、一些必要的解釋
到這裡為止，大家可能會有幾個問題。
Q1：命令行窗口怎麼打開？
A1：windows系統在左下角的搜索框輸入cmd即可
Q2：package.json中的scripts有什麼用？
A2：如上面的實例，當我們輸入「npm run build」就相當於是通過npm腳本執行了「webpack --config webpack.config.js」。
那為什麼我們不直接在命令行中輸入後面的那行代碼呢？因為上面的實例代碼中，webpack是局部安裝的，因此在環境變數中不能找到webpack，直接輸入那行代碼會提示找不到webpack。
那為什麼npm的script就能運行呢？我們通過npm安裝的包都會放在node_modules的目錄中，而這個目錄中有一個叫.bin的子目錄，在這個目錄中放置有webpack的可執行文件。npm的script默認會去.bin中尋找，因此能夠運行。
這個問題也能通過全局安裝解決，-g表示全局安裝。
$ cnpm install -g webpack
$ cnpm install -g webpack-cli
Q3：為什麼推薦使用局部安裝？
A3：我們寫完的代碼可能會給其他人用，而我們不能保證其他人也全局安裝了webpack，因此局部安裝webpack比較保險。
推薦閱讀：
