1.基礎知識點 1.1 webpack 是一個現代 JavaScript 應用程式的模塊打包器(module bundler)。當 webpack 處理應用程式時,它會遞歸地構建一個依賴關係圖(dependency graph),其中包含應用程式需要的每個模塊,然後將所有這些模塊打包成一個或多個 b ...
1.基礎知識點
1.1 webpack 是一個現代 JavaScript 應用程式的模塊打包器(module bundler)。當 webpack 處理應用程式時,它會遞歸地構建一個依賴關係圖(dependency graph),其中包含應用程式需要的每個模塊,然後將所有這些模塊打包成一個或多個 bundle。
1.2webpack的四個核心概念:
1.2.1 entry(入口):entry point,入口起點(可以有多個),webpack會從該起點出發,找出哪些文件時入口文件所依賴的,從而構建內部依賴關係圖,並處理後輸出到稱之為bundles的文件中
1.2.2 output(輸出):指定經entry point處理後的bundles文件的輸出路徑(path)和名字(filename)
1.2.3 loader(載入器):用來處理非JS文件,可以將所有文件轉換成webpack可以處理的模塊,然後交給webpack進行打包等處理;webpack loader 本質上講是將所有類型的文件轉化為應用程式的依賴圖可以直接引用的模塊,其有兩個目標:
1.2.3.1 使用test屬性,識別出對應於 loader 的可轉換文件
1.2.3.2 使用use屬性將這些文件進行轉換,使其被添加到依賴圖中,並且最終會添加到 bundle 中
如果要在 webpack 配置中定義 loader ,要在 module.rules
中定義,而不是 rules
1.2.4 plugins(插件):從打包優化和壓縮,一直到重新定義環境中的變數。插件介面功能極其強大,可以處理各種各樣的任務
使用一個插件只需要 require()
它,然後把它添加到 plugins
數組中就行。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件,這時需要通過使用 new
操作符來創建它的一個實例。
webpack 提供許多開箱可用的插件!查閱插件列表獲取更多信息,更詳細的圖文請參閱官方文檔 https://doc.webpack-china.org/concepts/。