[Webpack并不難]使用教程（一）--- entry，devtool，output，resol

wudengzan 發布于2019-08-21 17:58 / 3370人閱讀

摘要：這是局部安裝局部安裝的使用要帶路徑哇，要寫路徑，好麻煩哦，沒事，那就全局安裝吧。如果該值是一個相對路徑，它將相對于包含的文件。就相當于就相當于就相當于后面帶有意味著要完全匹配如果，因為沒完全匹配，那么加載的是下文件夾里的使用教程二

Webpack是什么,我就不過多介紹了，大家都有耳聞，不過還是配張圖讓大家體會下。

我的webpack版本是 3.10.0

安裝Webpack可以全局安裝和局部安裝。局部安裝的話就最好在安裝的當前目錄下運行，你硬要在在外部用webpack？那你在命令行要輸入安裝webpack位置的路徑了。

npm install --save webpack // 這是局部安裝
./node_modules/.bin/webpack --help // 局部安裝的使用要帶路徑

哇，要寫路徑，好麻煩哦，沒事，那就全局安裝吧。

npm install -g webpack

現在用webpack一般都寫好配置文件的了，webpack.config.js，那么接下來就說這個配置文件主要怎樣寫。

module.exports = {
  devtool: "#eval-source-map", // 這個是打包的方式
  entry: "./main.js",          // 入口文件。支持數組形式，將加載數組中的所有模塊，但以最后一個模塊作為輸出，對象形式也一樣。
  output: {                    
    path: "./js",              // 打包后的文件存放位置
    publicPath: "/dist/",      // 這個下面詳說
    filename: "build.js"       // 打包后的文件名
  },
  resolve: {                   // 查找module的話從這里開始查找，下面詳說。
    root: "D:/webpack-test/src",
    extensions: [".js", ".json", ".scss"],
    alias: {
        // 下面有例子。
    }
  }
};

devtool：打包方式。（官網的文檔）

devtool選項	打包速度	重建速度	是否支持生產模式
source-map	-	-	支持
eval-source-map	-	+	不支持
cheap-module-source-map	0	-	支持
cheap-module-eval-source-map	0	++	不支持
cheap-source-map	+	0	支持
cheap-eval-source-map	+	++	不支持
eval	+++	+++	不支持

從上到下,打包速度越來越快，開發環境一般用eval-source-map，生產環境自行斟酌咯。畢竟打包越快，打包質量也就越差。還有，不知大家發現沒，帶eval都不支持生產模式哦。

publicPath （官網的文檔）

它被用來更新內嵌到css、html文件里的url值。

上面 publicPath: "/dist/" ,例如：

background-image:url("./test.png) // 路徑變為"/dist/.test.png"
path: "/js" // 上面打包后的文件位置，那么路徑變為"/dist/js/build.js"

pubilcPath很重要。在生產模式下如“test.png”文件可能會定位到CDN上并且你的Node.js服務器可能是運行在HeroKu（一個支持多種編程語言的云平臺）上邊的。一張圖片，手動修改下咯，那如果你網站有上百張呢，那publicPath："你服務器的ip地址"，這樣省事很多吧。

resolve （官網的文檔）

root：包含您的模塊的目錄（絕對路徑）。

extensions：加載模塊時可忽略的擴展名。

alias：模塊別名定義。舉些例子：

"Abc": "/js/x/y/z/abc.js"  
// require("Abc"); 相當于 require("/js/x/y/z/abc.js")
// 如果 require("Abc/index.js"), 這樣不行的。

"Abc": "./js/x/y/z/abc.js" 
// 如果該值是一個相對路徑，它將相對于包含require的文件。
// 例如：在test.js中require("Abc"), 那么test.js和abc.js要在同目錄下的。  
  
"Abc": "/js/store"
// require("Abc") 就相當于 require("/js/store/index.js")
// require("Abc/other.js") 就相當于 require("/js/store/other.js")
  
"Abc$": "/js/store"
// require("Abc") 就相當于 require("/js/store/index.js")
// 后面帶有 $ ,意味著要完全匹配 "Abc"
// 如果 require("Abc/other.js")，因為沒完全匹配Abc，那么加載的是 node_modules下Abc文件夾里的other.js！！！

使用教程（二）--- module.loaders

云服務器 GPU云服務器 webpack教程 webpack使用 webpack4教程 webpack 使用公用cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90279.html

[Webpack并不難]使用教程（四）--- devServer

摘要：使用教程一，，，使用教程二使用教程三我的版本是官方的文檔在開發模式下，提供虛擬服務器，讓我們進行開發和調試。文檔如果為，開啟虛擬服務器時，為你的代碼進行壓縮。的警告和錯誤是不輸出到終端的。而則作用于請求路徑上的。不想啟用也可以填。使用教程（一）--- entry，devtool，output，resolve使用教程（二）--- module.loaders使用教程（三）--- pl...

Anonymous1 2019-08-22 11:15 評論0 收藏0
[webpack并不難]總結

摘要：剛寫的時候，心里有很多小聲音寫不好的萬一寫錯，誤導別人怎么辦等等。最重要還是感謝你的支持。接下來還會寫些有趣的東西帶給大家。這個教程就此完結咯，兩周前的一個念頭也實現了。剛寫的時候，心里有很多小聲音：寫不好的 , 萬一寫錯，誤導別人怎么辦等等。萬事開頭難，寫著寫著就發現和之前看到的一句話很貼切，輸入一些東西很簡單的，但你要輸出確實比較難。使用教程（一）--- entry，...

forrest23 2019-08-22 11:18 評論0 收藏0
[Webpack并不難]使用教程（三）--- plugins

摘要：使用教程一，，，使用教程二版本官方的文檔上一篇講到的是被用來轉換某些類型的模塊，它則可以用來做更廣泛的任務。可看作綁定事件，打包時會觸發事件。它的作用是定義全局常量，是常量。為，啟用兩步之間的延遲。請注意，規范建議始終使用引號。使用教程（一）--- entry，devtool，output，resolve使用教程（二）--- module.loadersWebpack版本 3.10...

Youngs 2019-08-22 13:40 評論0 收藏0
[Webpack并不難]把它當人物養成游戲吧。

摘要：發覺其實真的不難，畢竟它是一個工具，如果用起來都不順手，那為什么那么多人用，是不是。我覺得可以把當成人物養成游戲來玩，哦不，來學。聽說把寶石放進這工具就能自動更新打包。公司最近弄來了一些未來的文言文，你把它翻譯成現代文吧。前言這段可以跳過看下面的。本來，這個教程想完結的了。但回頭看自己寫的，感覺就像寫明了什么意思，具體怎么使用都沒說明白，而且讓人看得會有點乏味吧。我也是剛開始...

andot 2019-08-22 11:17 評論0 收藏0
[Webpack并不難]使用教程（二）--- module.loaders

摘要：官方的文檔模塊受到影響的選項。官方文檔通過注入標簽將添加到。官方文檔這兩者一般都是配合在一起用的。代表圖片打包限制，這個限制并不是說超過了就不能打包，而是指當圖片大小小于限制時會自動轉成碼引用。不過它的放后面。第一篇講了Webpack的安裝，以及配置文件的 entry，devtool，output，resolve。這篇接著說配置文件的 module。想看看第一篇的朋友可以點這里。 ...

HollisChuang 2019-08-21 17:59 評論0 收藏0