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

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'
        }
    }