【webpack核心】- 15、其他細節配置

1、context – 配入口和loaders的基準路徑

context: path.resolve(__dirname, "app")

context(上下文)配置會影響入口和loaders的解析，入口和loaders的相對路徑會以context的配置作爲基準路徑，這樣，你的配置會獨立於CWD（current working directory 當前執行路徑）

module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: {
        //index: "./src/index.js",
        //a:"./src/index.js"
        index: "./index.js",   // 2. 修改路徑，爲相對src的相對路徑
        a:"./index.js"
    },
    context: path.resolve(__dirname, "src")    //1 . 這樣配置後，相對路徑是相對這個目錄
}

• 命令行中運行npx webpack的路徑，就是cwd，當前執行路徑，如果執行命令的位置改變，路徑就不正確了
• 默認``入口 和loaders 的相對路徑 是相對當前webpack命令的執行路
• 配置 context 後，相對路徑是相對與context指定的路徑
• __dirname 是當前運行的js – webpack.config.js 所在的路徑
• 這樣的好處，可以讓配置獨立與當前執行路徑

2、output

webpack 打包結果是一個自執行函數，library 用來處理把自執行結果暴露給誰

library – 工程，庫–存入口文件導出的結果

var path = require("path")
module.exports = {
	entry:{
		index:"./src/index.js"
	},
	output:{
		filename:"[name]-[hash:5].js",
		path:path.resolve(__dirname, "target"),  //打包的目錄，默認是dist 目錄，這裏要寫絕對路徑
		library:"abc",   //打包結果是一個立即執行函數，把自執行函數的結果賦值給abc,這樣暴露了一個變量abc,abc裏是入口文件導出的結果
		libraryTarget: "var"
		}
}

library: "abc"是打包後的結果中，會將自執行函數的執行結果暴露給abc,abc裏是入口文件導出的結果

libraryTarget

libraryTarget: "var"該配置可以更加精細的控制如何暴露入口包的導出結果

• library 是暴露結果所存變量的名稱，libraryTarget 是如何暴露

其他可用的值有：
var：默認值，暴露給一個普通變量 – 默認 var abc = …
window：暴露給window對象的一個屬性
this：暴露給this的一個屬性
global：暴露給global的一個屬性
commonjs：暴露給exports的一個屬性 – commonjs的語法暴露，exports[“abc”] =…

其他：https://www.webpackjs.com/configuration/output/#output-librarytarget

3、target – 構建的目標環境

target:"web" //默認值- 瀏覽器環境

設置打包結果最終要運行的環境，常用值有：

• web: 打包後的代碼運行在web環境中
• node：打包後的代碼運行在node環境中
  其他：https://www.webpackjs.com/configuration/target/

4、module.noParse – 不需要解析的模塊

noParse: /jquery/

不解析正則表達式匹配的模塊，通常用它來忽略那些大型的單模塊庫，以提高構建性能

• 例如jquery 用的就是打包後的代碼，裏面沒有需要分析的依賴的，所以可以不再進一步解析了，這樣可以提高打包的效率，和打包結果的執行效率無關
• 如果不是單模塊，裏面有依賴，放在noParse裏會報錯

5、resolve

resolve的相關配置主要用於控制模塊解析過程

var path = require("path")
module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: {
        index: "./index.js",   // 2. 修改路徑，爲相對src的相對路徑
        a:"./index.js"
    },
    context: path.resolve(__dirname, "src"),    //1 . 這樣配置後，相對路徑是相對這個目錄
    resolve:{
    	modules: ["node_modules"], //默認值  --當模塊依賴沒有./ 的時候，從這裏開始查找
    	extensions: [".js", ".json",, ".css", ".vue", ".jsx"],  //配置後 就不用寫相應後綴名了
    	alias: {  //別名
		 "@": path.resolve(__dirname, 'src'),   
		  "_": __dirname
		}
   	}
}

modules – 模塊的查找位置

modules: ["node_modules"]  //默認值  --當模塊依賴沒有./ 的時候，從這裏開始查找

• 當解析模塊時，如果遇到導入語句，require("test")，webpack會從下面的位置尋找依賴的模塊 ，當模塊依賴沒有./ 的時候，從這裏開始查找
• 值是一個數組，可以位置多個位置，第一個位置沒有找到，依次查找

問題：如下，在./src/index.js裏寫了如下代碼，這個代碼會在node_modules裏找jqery模塊，這種查找模塊，是誰在查找？
當前目錄下的node_modules目錄
上級目錄下的node_modules目錄
…

// ./src/index.js
var $ = require('jquery');

答：webapck 在查找，打包的時候，把require 後面的路徑，當作普通文件讀出來，分析依賴，不會運行這個文件
只是webpack查找方式，和 node 一樣，沒有./ 就在node_modules裏找，有的話再按相對路徑找

問：如下代碼，打包結果中，包含：
A. index 和 a
B. index
C. index 有可能有a

// ./src/index.js
if(Math.random() < 0.5){
 	require('./a')
}

答： A ， webpack 讀取index.js文件內容後，根據require 和 import 查找依賴，只有有依賴 就肯定會打包

extensions – 配置 自動補全 後綴名

extensions: [".js", ".json"]  //默認值

• 當解析模塊時，遇到無具體後綴的導入語句，例如require("test")，會依次測試它的後綴名
• 默認是js,json 當文件沒有寫後綴名的時候，會去查找相應目錄下有沒有a.js ，沒有的話 再看有沒有 a.json ， 然後依次查找

extensions: [".js", ".json",, ".css", ".vue", ".jsx"]  //配置後 就不用寫相應後綴名了

問：爲什麼沒有書寫後綴名，仍然可以找到a.js

// ./src/index.js
require('./a')

答：因爲webpack會自動補全後綴名，根據 extensions 配置的自動補全

alias – 別名 - 方便導入依賴

alias: {
  "@": path.resolve(__dirname, 'src'),   
  "_": __dirname
}

• 別名必須配置 絕對路徑
• 工程很大時，源碼結構文件夾可能會嵌套很深，比如下面的a 和 other.js同級，a/b/c/d.js要使用other.js ， 使用別名更加方便的導入依賴

 require("../../../other.js")      //層次多了 就很混亂
  require(@/other.js")   //  如上配置了@ 指向src 路徑，就可以直接再src下查找

• 有了alias（別名）後，導入語句中可以加入配置的鍵名，例如require("@/abc.js")，webpack會將其看作是require(src的絕對路徑+"/abc.js")。
• 導入模塊的時候，路徑的書寫，可以使用別名， 配置別名不影響打包結果中的路徑

6、externals

externals: {
    jquery: "$",   //表示外部模塊
    lodash: "_"
}

• 沒有這個配置的話，會再打包結果中，把jquery的源代碼，放在打包文件的對應路徑的屬性值裏，但我們實際希望，打包結果裏使用的juery 是cdn上的，打包結果裏不需要存放jquery的源碼了

從最終的bundle中排除掉配置的配置的源碼，例如，入口模塊是

//index.js
require("jquery")
require("lodash")

生成的bundle是：

(function(){
    ...
})({
    "./src/index.js": function(module, exports, __webpack_require__){
        __webpack_require__("jquery")
        __webpack_require__("lodash")
    },
    "jquery": function(module, exports){
        //jquery的大量源碼
    },
    "lodash": function(module, exports){
        //lodash的大量源碼
    },
})

但有了上面的配置後，則變成了

(function(){
    ...
})({
    "./src/index.js": function(module, exports, __webpack_require__){
        __webpack_require__("jquery")
        __webpack_require__("lodash")
    },
    "jquery": function(module, exports){
        module.exports = $;   //cdn引入jqery 後會有個全局變量$,所以其他頁面可以使用$ 了
    },
    "lodash": function(module, exports){
        module.exports = _;
    },
})

這比較適用於一些第三方庫來自於外部CDN的情況，這樣一來，即可以在頁面中使用CDN，又讓bundle的體積變得更小，還不影響源碼的編寫

stats
stats控制的是構建過程中控制檯的輸出內容,也就是命令行裏會打印的內容

stats：{
	colors:true ,   //打印結果帶顏色
	modules:false,   //打包時，不在命令行中顯示打包的模塊
	hash:false, //不顯示hash
}