webpack查缺補漏

webpack是模組化打包工具，通過webpack，可以使得我們更加方便地組織**、壓縮、轉譯等等。但是學習webpack也需要一定的成本，這裡記錄使用webpack許久以來一些模糊的知識點，方便以後查閱。

（該配置檔案可以幫助我們快速理解實際專案中的配置屬性）

1. var path = require('path')，其中的path需要我們安裝嗎?

不需要。使用了node環境之後，path模組是node提供了的，所以不需要進行npm install path這樣的操作。

2. webpack的好處有哪些 ?

開頭就說了，使用webpack可以方便我們組織**，比如乙個專案依賴於某個庫，我們可以直接將這個庫的js放在html中，然後再在另一處引入js檔案，這個js使用了這個庫，但是他們卻沒有明顯的依賴關係，並且在專案稍大時，不僅依賴關係很難控制，並且會引入很多檔案，傳送多個http請求。但是使用了webpack之後，我們就可以從乙個入口檔案開始組織依賴關係，這樣的關係就很明確，並且最終可以打包到乙個js中，減少了http請求。

3. 必須在根目錄下新增乙個webpack.config.js檔案嗎？名字不能改變？位置不能改變？既然可以使用cli，為什麼還要使用配置檔案呢？

不是的。一般，在根目錄下回有乙個webpack.config.js，然後在cli工具中使用weibpack命令就可以就可以預設找到根目錄下的webpack.config.js進行打包，而我們也可以起乙個別的配置檔案的名字，如my.config.js，只是這時我們需要指定相應的引數，如 webpack --config my.config.js ，只是這時還是預設根目錄。好處在於這種方法對於大型專案，配置檔案可能不只乙個，我們需要自定義名稱。

雖然可以使用cli完成相同的命令，但是每次你都需要輸入一大段命令。而如果使用了配置檔案，就只需要webpack，更多設定就由配置檔案來提示了。

當然，另外一種更為方便和廣泛使用的方法就是使用npm scripts，如npm run build，在package.json中的scripts中使用"build": "webpack"即可。

4. 在做專案時，我們發現在配置webpack的過程中，想要在jsx檔案中引入或者是css都不能成功，這是為什麼？

因為webpack認為這個專案中的所有檔案都是模組，都是他所關心的。遺憾的是，webpack只認識js檔案，對於js的處理沒有問題，但是對於css檔案、、設定js衍生出的jsx檔案都是不能識別的，如果希望正常引用這些檔案，我們必須要使用webpack四大核心概念（entry、output、plugins、loaders）中的loaders，即模組載入器，比如對於一般的react專案，我們需要保證的是jsx、css、less以及的正常載入，配置檔案如下所示：

module.exports = ,
watch: true,
module: },,
, , ]},]
}}

即test屬性用於檢測檔案型別，而loader屬性用於說明使用的載入器。

babel-loader用於載入jsx檔案，css-loader用於尋找所有的css檔案、style-loader用於嵌入css檔案到html中，style-loader、css-loader、less-loader三者配合處理less檔案，對於檔案也需要url-loader載入器才能完成模組的載入。

5. 第四個問題中，我們提到了loaders的作用，但是在官網上可以發現loaders內容下的例子使用的卻是rules，那麼loaders和rules的區別是什麼呢？

在stackoverflow上，我們可以發現這個問題：，即loaders的使用大多在webpack1,而rules是用在webpack2中的，並且 loaders 在未來將會被廢棄。

官網上的介紹如下：

const path = require('path');
const config = ,
module: 
]}};
module.exports = config;

但是在使用這種方法時對於jsx的query、exclude會出現一些問題，目前尚未解決。因為使用webpack2和1有所不同，需要在stackoverflow進一步尋找答案。

6. loaders和plugins的區別是什麼？例項？

loaders的作用大多是為了解決單個檔案的，將之轉化為模組，但是plugins是乙個更為強大、有力的針對打包的檔案進行編譯等的工具，loaders的使用一般都是直接針對不同的檔案使用不同的loader,但是plugins的使用是先通過require引入，然後在plugins中使用new建立例項才能完成的。

7.為什麼有時候覺得引用的相對路徑沒有問題，但是在控制台中看到的是404 not found？在webpack配置檔案中output裡的path和publicpath的區別是什麼(node端如此)？

output/#output-publicpath

一般path都會結合內建的path模組來使用，而publicpath不是的。path是說最終打包到的位置，而publicpath的作用是引用外部資源的位置。兩者是完全不同的。其預設是「」。比如在我之前做的vue專案中：

output: ,

接著找到config中的，build中的如下：

assetspublicpath: '/bbg/wechat2/',

即我們在伺服器上使用資源，尤其是使用node作為本地伺服器時，如果publicpath設定有問題，就無法獲取資源。

// serve pure static assets

var staticpath = path.posix.join('/', 'static')

即放在server端的純靜態檔案，這樣，就不會報出404錯誤了。

8. 在使用react、webpack配置時，可以發現我們html的末尾新增了bundle.js（注意：這是我提前就新增好的，而不是讓webpack自動新增的），那麼這個bundle.js由於打包到了dist下而沒有到static下，所以在引用時還會出現404錯誤，這個應該怎麼解決呢？

解決方法一：最簡單的解決方法當然是直接將打包的檔案打包到static下，而不是dist下，但是這樣的專案是難以理解的。經過嘗試：確實是可行的。

解決方法二：即我們只是希望在開發環境中使用（dev），而不是在生產環境中使用，其實和vue-cli生成的專案類似，我們是沒有必要將bundle.js打包到dist下的，而是直接執行起來即可。

webpack查缺補漏

bootstrap 查缺補漏

React查缺補漏

HTML查缺補漏

webpack查缺補漏

bootstrap 查缺補漏

React查缺補漏

HTML查缺補漏

相關推薦