深入淺出 Webpack【閱讀總結】章節二

前言 - 閱讀《深入淺出webpack》一書實踐記錄二

目錄

• Entry：入口，Webpack 執行構建的第一步將從 Entry 開始，可抽象成輸入。
• Output：出口，輸入結果。
• Module：模塊，Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。
• Resolve: 模塊如何被解析
• Externals：優化性能，不打包某些依賴模塊兒
• Devserver: 熱更新，配置服務ip ，端口等

核心概念

Webpack 啓動後會從 Entry 裏配置的 Module 開始遞歸解析 Entry 依賴的所有 Module。 每找到一個 Module， 就會根據配置的 Loader 去找出對應的轉換規則，對 Module 進行轉換後，再解析出當前 Module 依賴的 Module。 這些模塊會以 Entry 爲單位進行分組，一個 Entry 和其所有依賴的 Module 被分到一個組也就是一個 Chunk。最後 Webpack 會把所有 Chunk 轉換成文件輸出。

Entry

可配置 多頁面應用 或者 多入口的單頁應用，以下是幾種配置方式，entry：後邊可以動態配置，接受一個函數或者一個promise

module.exports  = {
  entry: './main.js'   // string 類型
};
module.exports  = {
  entry: ['./main.js', './main2.js']   
  // array 類型  數組裏的最後一個入口文件的模塊會被導出。
};
module.exports  = {
  entry: { 
      demo1:  './entry/demo1.js',
      demo2:  './entry/demo2.js',
      // object 類型
  } 
};

Output

配置出口的地方，常用的屬性配置，我們常用到 filename，path，publicPth

filename ： string 類型，出口文件暱稱，導出單個文件可以寫死 filename: "./main.js" ，導出多個文件就得使用內置變量了filename: "[name].js", 這裏的name表示用內置變量name (filename: "[name].js")，webpack會爲每一個chunk`取一個內置名稱。

path： 通過node的path模塊兒去獲取絕對路徑__dirname，後邊是字符串就是出口文件目錄配置

publicPath：表示打包後的靜態資源引用的路徑前綴，如：publicPath: "a/b"，則打包後的引用靜態資源路徑爲 http://www.XXX.com/a/b/靜態資源文件。

module.exports = {
	output: {
	    filename: "",  // string 類型，出口文件暱稱
	    chunkFilename: ""， // string  需要在runtime根據chunk發送的請求去生成
	    path: path.resolve(__dirname, 'dist'), // 生成出口文件目錄
		publicPath: ""， // 靜態資源的路徑。 需要按照開發環境或者生產環境配置
	    library：""， // string 導出庫的名稱 
	    libraryTarget: "",  //  以何種方式導出庫
	    libraryExport: "", // string, array 導出那些子模塊
    }
}

內置變量

注： Hash的長度是可以指定的如：[hash:8] ，默認20，其他配置項 在官方文檔中有介紹或者後續的筆記中更新。

Module

Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。等於是配置處理模塊兒的規則。常用 noParse，rules

noParse：提高webpack性能優化，忽略部分文件的解析和處理( 被忽略的文件不該包含import, require, define)，如 jquery 本身就不會模塊化，就不需要解析和處理，直接省略跳過。

rules： 配置Loader , 我們在章節一已經分享過了 GO章節一，當然了這個配置項是很重要的，章節一質檢單介紹了 loader的基礎配置 test 和 use，這裏又擴展了幾個，如：enforce，include，exclude 。

module.exports  = {
	module: {
	    parser: {  // 指定解析器的開關, 精確控制哪些語法可以被解析
	       amd: false, // 禁用AMD
	       commonjs: true, // 禁用CommonJs
	       ...
	    },
	    noParse: /jquery/ ,  // 忽略部分文件的解析和處理( 被忽略的文件不該包含import, require, define)
	    rules: [  // 配置Loader , 我們在章節一已經分享過了
	      {
	        test: /\.css/,   //  正則表達式的匹配規則， 也可是個array
	        use: [],  // 數組中可以是string， object
	        enforce: "pre", // enum  ["pre", "post"]  配置loder 的執行順序
	        // post 將loader 的執行順序放在最後
	        // pre 將loader 的執行順序放在最前邊 
	        
	        include: path.resolve(__dirname, 'src'), // 只匹配src目錄中的文件，接受數組
	        exclude: path.resolve(__dirname, 'dist'), // 排除dist目錄中的文件,接受數組, 例子如下：
	        // include: [path.resolve(__dirname, 'src'),path.resolve(__dirname, 'src2')]

	      }
	    ]
	}
}

Resolve

模塊如何被解析， （webpack本身含有默認值），常用 alias，extensions

alias：創建別名，避免過多的相對路徑，在開發中我們肯定會因爲組件各種層級引用靜態目錄 ../ 的困擾，這是一種引用別名配置。方便開發，提升效率。

extensions： 引用文件or組件，當無後綴名時，默認自動帶上後綴解析， import a from "a" , 沒有後綴名會依次找a.js,a.json，找不到就報錯；( extensions: [".js",".json"] 這樣配置的話 )。所以建議平常引用文件或者組件帶上後綴名，避免不需要的解析。

module.exports = {
	resolve: {
	   alias: { // 創建別名。 使引用是更方便，避免過多的相對路徑
	      images: path.resolve(__dirname, 'src/images/') 
	      css$: path.resolve(__dirname, 'src/assets/css')  // $ 標識精準匹配
	    },
	    extensions: [".js",".json"], // 當無後綴名時，默認自動帶上後綴解析
	    mainFiles: [], // 指定導入模塊時 導入的哪部分代碼
	    modules: ["node_modules"], // 默認只去node_modules中尋找第三方模塊
	    enforceExtension: false, // 允許無擴展名文件的引用
	    unsafeCache: /\aa/, // 開啓僅緩存aa模塊  regex, array, boolean
	    plugins: [],  // 額外的解析插件列表
	}
}

Externals

打包體積過大，不打包某些插件源碼模塊兒到文件裏。

module.exports = {
	externals: {
	    jquery: 'jQuery'  //  string, array. object, function, regex
	}
}

Devserver

常用 host，port，open，proxy 這個配置就多了，後期我們會有一個基本的實戰分享，請持續關注。

module.exports = {
	devServer: {
	   host: "", // 默認爲localhost， 設置爲ip 供外部訪問
	   port: "", // 監聽的端口， 默認8080
	   inline: true,  // false 時 責啓用iframe模式， true爲嵌入bundle中
	   allowedHosts: [], // 設置白名單
	   compress: true, //  啓用gzip壓縮
	   contentBase: path.join(__dirname, "public"), // 從哪提取靜態文件, 默認當前執行的目錄 ./
	   disableHostCheck: false,  // 關閉host檢查，使其他設備也能訪問本地服務
	   lazy: true, // 開啓惰性模式，僅在請求時編譯，即不監聽文件改動
	   filename: "", // 只在請求該文件時編譯， 必須開啓惰性模式
	   headers: {},  // 在所有想用中添加首部內容
	   hot: true, // 開啓模塊熱替換，僅刷新改變的模塊
	   clientLogLevel: "info",  // enum 客戶端的日誌級別，默認info
	   https: true, // 默認使用http服務，開啓https 後自動生成一份證書，也可用{}配置自己的證書,讀文件
	   open: true,  // 第一次構建後 自動打開瀏覽器
	   proxy: { // 代理
	     "/api":  "http://localhost:3000",
	     "/users": {
	       target: "https://localhost:3000",
	       pathRewrite: {"^/users" : ""},  // 將路徑重寫 如 /users/login -> /login
	       secure: false, // 若代理到https服務，則需要將secure設爲false
	       bypass: function(req, res, proxyOptions) {
	         if (req.headers.accept.indexOf("html") !== -1) {
	           console.log("Skipping proxy for browser request.");
	           return "/index.html";
	         }
	       }
	     }
	   },
	   quiet:  true, // 除初始啓動信息外都不會打印到控制檯
	 }
}

截至到這裏，webpack大部分屬性配置等，都有了簡單的介紹和認識，後邊我將帶領大家一起去實踐。