成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

wudengzan / 3421人閱讀

摘要：這是局部安裝局部安裝的使用要帶路徑哇，要寫(xiě)路徑，好麻煩哦，沒(méi)事，那就全局安裝吧。如果該值是一個(gè)相對(duì)路徑，它將相對(duì)于包含的文件。就相當(dāng)于就相當(dāng)于就相當(dāng)于后面帶有意味著要完全匹配如果，因?yàn)闆](méi)完全匹配，那么加載的是下文件夾里的使用教程二

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

我的webpack版本是 3.10.0

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

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

哇，要寫(xiě)路徑，好麻煩哦，沒(méi)事，那就全局安裝吧。

npm install -g webpack

現(xiàn)在用webpack一般都寫(xiě)好配置文件的了，webpack.config.js，那么接下來(lái)就說(shuō)這個(gè)配置文件主要怎樣寫(xiě)。

module.exports = {
  devtool: "#eval-source-map", // 這個(gè)是打包的方式
  entry: "./main.js",          // 入口文件。支持?jǐn)?shù)組形式，將加載數(shù)組中的所有模塊，但以最后一個(gè)模塊作為輸出，對(duì)象形式也一樣。
  output: {                    
    path: "./js",              // 打包后的文件存放位置
    publicPath: "/dist/",      // 這個(gè)下面詳說(shuō)
    filename: "build.js"       // 打包后的文件名
  },
  resolve: {                   // 查找module的話從這里開(kāi)始查找，下面詳說(shuō)。
    root: "D:/webpack-test/src",
    extensions: [".js", ".json", ".scss"],
    alias: {
        // 下面有例子。
    }
  }
};
devtool：打包方式。（官網(wǎng)的文檔）
devtool選項(xiàng) 打包速度 重建速度 是否支持生產(chǎn)模式
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 +++ +++ 不支持

從上到下,打包速度越來(lái)越快，開(kāi)發(fā)環(huán)境一般用eval-source-map，生產(chǎn)環(huán)境自行斟酌咯。畢竟打包越快，打包質(zhì)量也就越差。還有，不知大家發(fā)現(xiàn)沒(méi)，帶eval都不支持生產(chǎn)模式哦。

publicPath （官網(wǎng)的文檔）

它被用來(lái)更新內(nèi)嵌到css、html文件里的url值。

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

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

pubilcPath很重要。在生產(chǎn)模式下如“test.png”文件可能會(huì)定位到CDN上并且你的Node.js服務(wù)器可能是運(yùn)行在HeroKu（一個(gè)支持多種編程語(yǔ)言的云平臺(tái)）上邊的。一張圖片，手動(dòng)修改下咯，那如果你網(wǎng)站有上百?gòu)埬兀?b>publicPath："你服務(wù)器的ip地址"，這樣省事很多吧。

resolve （官網(wǎng)的文檔）

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

extensions： 加載模塊時(shí)可忽略的擴(kuò)展名。

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90279.html

相關(guān)文章

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

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

    Anonymous1 評(píng)論0 收藏0

  • [webpack并不難]總結(jié)

    摘要：剛寫(xiě)的時(shí)候，心里有很多小聲音寫(xiě)不好的萬(wàn)一寫(xiě)錯(cuò)，誤導(dǎo)別人怎么辦等等。最重要還是感謝你的支持。接下來(lái)還會(huì)寫(xiě)些有趣的東西帶給大家。 這個(gè)教程就此完結(jié)咯，兩周前的一個(gè)念頭也實(shí)現(xiàn)了。剛寫(xiě)的時(shí)候，心里有很多小聲音： 寫(xiě)不好的 , 萬(wàn)一寫(xiě)錯(cuò)，誤導(dǎo)別人怎么辦 等等。萬(wàn)事開(kāi)頭難，寫(xiě)著寫(xiě)著就發(fā)現(xiàn)和之前看到的一句話很貼切，輸入一些東西很簡(jiǎn)單的，但你要輸出確實(shí)比較難 。 使用教程（一）--- entry，...

    forrest23 評(píng)論0 收藏0

  • [Webpack并不難]使用教程（三）--- plugins

    摘要：使用教程一，，，使用教程二版本官方的文檔上一篇講到的是被用來(lái)轉(zhuǎn)換某些類型的模塊，它則可以用來(lái)做更廣泛的任務(wù)?？煽醋鹘壎ㄊ录?，打包時(shí)會(huì)觸發(fā)事件。它的作用是定義全局常量，是常量。為，啟用兩步之間的延遲。請(qǐng)注意，規(guī)范建議始終使用引號(hào)。 使用教程（一）--- entry，devtool，output，resolve使用教程（二）--- module.loadersWebpack版本 3.10...

    Youngs 評(píng)論0 收藏0

  • [Webpack并不難]把它當(dāng)人物養(yǎng)成游戲吧。

    摘要：發(fā)覺(jué)其實(shí)真的不難，畢竟它是一個(gè)工具，如果用起來(lái)都不順手，那為什么那么多人用，是不是。我覺(jué)得可以把當(dāng)成人物養(yǎng)成游戲來(lái)玩，哦不，來(lái)學(xué)。聽(tīng)說(shuō)把寶石放進(jìn)這工具就能自動(dòng)更新打包。公司最近弄來(lái)了一些未來(lái)的文言文，你把它翻譯成現(xiàn)代文吧。 前言 這段可以跳過(guò)看下面的。 本來(lái)，這個(gè)教程想完結(jié)的了。但回頭看自己寫(xiě)的，感覺(jué)就像寫(xiě)明了什么意思，具體怎么使用都沒(méi)說(shuō)明白，而且讓人看得會(huì)有點(diǎn)乏味吧。 我也是剛開(kāi)始...

    andot 評(píng)論0 收藏0

  • [Webpack并不難]使用教程（二）--- module.loaders

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

    HollisChuang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<