切圖崽的自我修養－[BUILD] webpack體驗記錄

ZHAO_ 發布于2019-08-20 12:11 / 814人閱讀

摘要：體驗記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點之前構建工具的選擇上，公司也是很早之前就從收攏為的確是個好工具，作為工具核心的依賴表是非常好的構建思路，也是很多大公司一直在用的構建工具但是個人用的非常不習慣生態不是很好它太大太重

Webpack體驗記錄

webpack大法好退fis保平安

~~打包工具~~前端工程化一直是前端的一塊重點.之前構建工具的選擇上，公司也是很早之前就從grunt/gulp收攏為fis. fis的確是個好工具，作為工具核心的依賴表是非常好的構建思路，也是很多大公司一直在用的構建工具.

但是個人fis用的非常不習慣

生態不是很好

它太大太重了,比起單純的打包工具，它更像前端構建的一種解決方案

從個人角度上,跑demo,做單頁,在構建工具上投入太多精力和時間去研究不太值得

我想找的是能夠快速進行業務開發，傻瓜式并且生態很好的純粹的打包工具.加之最近才開始慢吞吞的鼓搗vue,于是就看上了webpack.這里就來簡要的記一下最近webpack的學習心得.

Webpack.config.js配置選項 entry

    entry: "./entry.js",

  entry: {
    entry1: "./entry1.js",
    entey2: "./entry2.js"
  }

配置入口

可以單入口(把所有文件打包成一個文件)

可以多入口(將文件分開打包成多個文件，減少單個文件的體積大小)

externals

  externals: {
        "$": "window.Jquery"
    }

聲明不加入打包流程的文件(多用于第三方庫)

表示這個依賴項是外部lib，如jquery,它不會和業務js一起打包.這樣有一個好處，改動業務代碼重新打包，不會將那些體積巨大的第三方庫打包了，利好啊有木有

devtool

devtool:"source-map"

開啟生成source-map,便于在chrome里調試

很多情況下，我們開發的代碼，和真正在瀏覽器里跑的代碼(構建后的代碼)是不一樣的，這樣會造成調試的不方便.實現一下,如果我們要在瀏覽器里斷點調試業務js,但這個業務js是n多個js合并壓縮混淆之后生成的一個aio.js,鬼才能在這種情況下調試.

所以為了解決這個問題，一般的構建工具會分環境來構建. 比如維護dev和prod的兩套配置，在開發時候跑構建工具的dev配置,不對資源文件進行合并和壓縮，從而減少構建后的代碼和開發代碼的差異性，方便在瀏覽器里進行調試.

真正上線的時候,跑構建工具的prod配置，對資源文件進行合并壓縮.

還有一種調試方案，就是sourcemap, 我們可以在瀏覽器環境跑aio.js,它的確是被合并壓縮混淆后的產物. 但是如果我們有sourcemap，就可以根據這個sourcemap逆向推出aio.js合并壓縮混淆之前的各個文件的狀態.
簡單的說，開啟生成sourcemap的選項后

a.js+b.js+c.js 合并壓縮混淆后生成 aio.js+sourcemap

aio.js+sourcemap 可以逆推生成 a.js/b.js/c.js合并壓縮混淆前的狀態

P.s source map的調試依賴于chrome瀏覽器

cmd+opt+i 進入開發者模式

setting里Sources的選項可以開啟js和css的source map調試選項

開啟webpack.config.js里的devtool:"source-map"

用webpack-dev-server打包項目

進入chrome調試項目,你可以在sources->webpack://里看到bundle.js經過source－map映射后的解壓縮文件

(如果要對sass進行sourcemap調試，需要在sass-loader里再顯示開啟source-map)

chrome里開啟sourcemap選項

sourcemap調試Js

sourcemap調試Sass

output

  output: {
    filename: "bundle.js"
    path: "dist/js/",
    publicPath:"/assets/"
  }

filename - 構建出的文件名稱

path - 開發環境下的訪問路徑

publicPath －生產環境下的訪問路徑(cdn)

module/loaders

 module: {
    //加載器配置
    loaders: [{
      test: /.css$/,
      loader: "style-loader!css-loader"
    }, {
      test: /.scss$/,
      loader: "style!css!sass?sourceMap"  //開啟了source-map
    }, {
      test: /.(png|jpg)$/,
      loader: "url-loader?limit=8192"
    }]
  }

最重要的就是loader,用來加載資源模塊

test - 匹配的文件正則

exclude - 排除某些文件

include - 包含某些文件

loader - 對匹配的文件要使用的loader，通過!可以完成多loader處理，方向從右向左，通過?加參數的方法對loader開啟一些配置

plugins

配置對應的插件來拓展及優化打包流程(比如抽出公共js/css/等等)

resolve

用來偷懶的屬性, 用了它, require文件的時候不需要帶后綴名了,引用路徑也變短了,老大再也不用擔心我寫錯了

 resolve: {
        //查找module的話從這里開始查找
        root: "/pomy/github/flux-example/src", //絕對路徑
        
        //自動擴展文件后綴名，意味著我們require模塊可以省略不寫后綴名
        extensions: ["", ".js", ".json", ".scss"],
        
        //模塊別名定義，方便后續直接引用別名，無須多寫長長的地址
        alias: {
            AppStore : "js/stores/AppStores.js",//后續直接 require("AppStore") 即可
            ActionType : "js/actions/ActionType.js",
            AppAction : "js/actions/AppAction.js"
        }
    }

云服務器 GPU云服務器切圖崽圖像識別數學修養自我評價自我介紹

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

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

切圖崽的自我修養－[BUILD] webpack體驗記錄

摘要：體驗記錄大法好退保平安打包工具前端工程化一直是前端的一塊重點之前構建工具的選擇上，公司也是很早之前就從收攏為的確是個好工具，作為工具核心的依賴表是非常好的構建思路，也是很多大公司一直在用的構建工具但是個人用的非常不習慣生態不是很好它太大太重 Webpack體驗記錄 webpack大法好退fis保平安打包工具前端工程化一直是前端的一塊重點.之前構建工具的選擇上，公司也是很早之前就從g...

ralap 2019-08-01 15:56 評論0 收藏0
切圖崽的自我修養－－[BUILD]構建工具思路梳理

摘要：前言之前也是從過來的，到現在的中間有些問題沒怎么細想，比如明明是構建工具為什么調試總是要開啟一個服務之類的，現在就來簡單梳理下思路最原始的構建工具無非是這樣改動了某個資源文件，要手動運行構建命令才能重新構建，重新構建的時候構建工具將所有資源前言之前也是從grunt/gulp/fis/過來的，到現在的webpack,中間有些問題沒怎么細想，比如明明是構建工具為什么調試總是要開啟一個h...

wfc_666 2019-08-20 12:14 評論0 收藏0
切圖崽的自我修養－－[BUILD]構建工具思路梳理

摘要：前言之前也是從過來的，到現在的中間有些問題沒怎么細想，比如明明是構建工具為什么調試總是要開啟一個服務之類的，現在就來簡單梳理下思路最原始的構建工具無非是這樣改動了某個資源文件，要手動運行構建命令才能重新構建，重新構建的時候構建工具將所有資源前言之前也是從grunt/gulp/fis/過來的，到現在的webpack,中間有些問題沒怎么細想，比如明明是構建工具為什么調試總是要開啟一個h...

elina 2019-08-01 15:55 評論0 收藏0
切圖崽的自我修養－[HTTP] 部署WEB服務流程梳理

摘要：前言關鍵字域名，備案服務器解析記錄配置流程你想在云端部署兩個服務，一個新聞站點，一個游戲門戶站點域名也已經想好了，是和用戶通過訪問能訪問到新聞站點，通過訪問能訪問游戲門戶站點首先，你需要上阿里云上買一個一級域名按照中國的相關法律規定，域名如前言: 關鍵字: 域名，備案, ip, 服務器, dns解析記錄配置流程: 你想在云端部署兩個web服務，一個新聞站點，一個游戲門戶站點. 域名...

Barry_Ng 2019-08-29 11:23 評論0 收藏0