一、Webpack是什么、為什么要使用它

簡單來說，Webpack是一個打包工具。

站在2018年的角度，成為一個優秀的前端工程師，除了要會寫頁面樣式和動態效果之外，還需要會用主流的單頁面框架、Node.js、簡單的前端的性能優化等等。加上現在一部分服務器的邏輯移到了前端上，所以實際上前端的復雜度也是提升了很多。

而Webpack可以幫助我們完成一些任務。比如js壓縮、css壓縮、編譯模板文件等等，從而減少前端的工作量。當然，Webpack功能很強大，能幫我們完成的工作遠遠不止這些。

下面，讓我們慢慢了解Webpack吧~

二、安裝

① Webpack的運行需要依賴Node.js，因此需要先安裝Node.js。

中文網下載地址：下載 | Node.js 中文網

安裝完成之后在命令行窗口輸入下面兩行命令，若有出現版本號則安裝成功。

$

② 接著就可以通過npm（一個基于Node.js的包管理工具）來安裝Webpack咯~

首先，通過下面的一行命令先生成package.json

$ npm init

③ 接著就能通過npm完成webpack的安裝啦

因為npm的源在國外，所以安裝速度可能比較慢。建議大家可以用淘寶的npm鏡像。但是要注意的一點是，淘寶npm鏡像中有一些包會不太一樣（一般來說不影響使用）

淘寶 NPM 官網：淘寶 NPM 鏡像

通過下面這行代碼即可完成cnpm的配置

$

通過下面兩行代碼即可完成webpack的安裝

// 要是不想使用淘寶的npm鏡像，就用npm代替cnpm $ cnpm install -D webpack $ cnpm install -D webpack-cli

④ 安裝完之后在package.json同級目錄新建一個webpack.config.js文件。然后再在package.json中增加一個“scripts”配置項。

//

接著在命令行中輸入下面的這行代碼就可以啟動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比較保險。

總結

以上是生活随笔為你收集整理的cnpm安装webpack_Webpack（一）介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。