1、其實Webpack和另外兩個並沒有太多的可比性，Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模組化的解決方案，不過Webpack的優點使得Webpack在很多場景下可以替代Gulp類的工具。

2、Gulp的工作方式是：在一個配置檔案中，指明對某些檔案進行類似編譯，組合，壓縮等任務的具體步驟，工具之後可以自動替你完成這些任務。

三、webpack安裝

使用npm 安裝，新建一個空的資料夾（webpack sample project），終端轉到該資料夾目錄下，執行以下命令。

命令列：npm -v 檢視版本號

安裝npm：npm install  –save mocha

全域性安裝webpack ：npm insatll webpack -g

出現以下問題解決方案：

1、

終端輸入：sudo npm install webpack -g

2、

解釋：npm 版本問題導致，需要更新npm的版本或者回退版本

終端：

npm install npm -g  //更新npm版本

npm – v // 檢視版本號

在去安裝webpack就不出現這個問題了。

檢視版本號：webpack -h

四、webpack的使用

1、在建立的資料夾中建立一個package.json 檔案。

出現問題：

原因：

原因是npm install -g webpack預設是全域性安裝的webpack最新版，目前是4.0.1，這個版本中webpack命令列工具被單獨分離到了webpack-cli中，因此需要額外安裝webpack-cli才能使用webpack命令，不過坑也很多。

為了和該視訊配套，建議安裝1.1.3版本，即使用npm install -g [email protected]就可以了。

2、終端中使用webpack（使用時有可能會出錯、建議使用第二種方式使用）

module.exports ={
    entry:  __dirname +"/app/main.js",//已多次提及的唯一入口檔案
    output:{
        path: __dirname +"/public",//打包後的檔案存放的地方
        filename:"bundle.js"//打包後輸出檔案的檔名}}在終端中輸入：webpack 若非全域性node_modules/.bin/webpack
這條命令會自動引用webpack.config.js檔案中的配置選項

3.2對npm進行配置後可以在命令列中使用簡單的npm start命令來替代上面略微繁瑣的命令在package.json中對script物件進行設定即可。{"name":"webpack-sample-project","version":"1.0.0","description":"Sample webpack project","scripts":{"start":"webpack"//修改在這裡 json不支援註釋 使用時請刪除},"author":"zhang","license":"ISC","devDependencies":{"webpack":"3.10.0"}}Ps：package.json中的會安裝一定順序尋找命令對應位置本地的node_modules/.bin路徑就在這個尋找清單中，所以無論是全域性還是區域性安裝的Webpack，你都不需要寫前面那指明詳細的路徑了。